無제

🟡 useReducer복잡한 상태를 체계적으로 관리하기 위한 React Hook.useState는 간단한 상태를 관리할 때 사용하며, 여러 상태가 서로 연관되거나 상태 변경 로직이 복잡한 경우에는 useReducer를 사용하는 것이 좋다. ◼️ 필요 이유 useState는 간단한 상태 관리에는 적합하지만 다음과 같은 상황에서는 코드가 복잡해질 수 있다. 1️⃣ 여러 상태가 서로 연관된 경우 여러 개의 상태가 함께 변경되어야 한다면 useState를 여러 번 사용해야 한다.const [title, setTitle] = useState("");const [content, setContent] = useState("");const [author, setAuthor] = useState(""); 상태가 많아..

🟡 Context API 여러 컴포넌트에서 공통으로 사용하는 데이터를 전역으로 공유할 수 있도록 해주는 React의 내장 기능. ◼️ Props Drilling의 문제점기본적으로 React는 부모에서 자식으로 props를 통해 데이터를 전달하지만, 컴포넌트 구조가 깊어질수록 불필요하게 여러 컴포넌트를 거쳐 데이터를 전달해야 하는 문제가 발생한다. 데이터를 사용하지 않는 중간 컴포넌트까지 props를 계속 전달하는 현상을 Props Drilling이라고 한다. Context API는 이러한 Props Drilling 문제를 해결하기 위해 사용된다. (데이터 소유) ↓ Props 전달 (데이터 전달) ↓ Props 전달 (데이터 전달) ↓ Props 전달 (데이터 사용)코드 복잡성 데이터를 전달하..

🟡 Styled ComponentsReact에서 CSS를 JavaScript 파일 안에 작성할 수 있도록 해주는 CSS-in-JS 라이브러리. ◼️ 일반 인라인 스타일과의 차이 1️⃣ 인라인 스타일 const ReactButton = (props) => { const style = { color: "white", backgroundColor: "purple", }; return {props.children};};JavaScript 객체 형태로 스타일을 작성한다.CSS 속성명을 camelCase(backgroundColor)로 작성해야 한다.의사 클래스(:hover)나 미디어 쿼리 등을 사용할 수 없다.스타일이 많아질수록 코드가 복잡해진다. 2️⃣ Styled Components i..