2025 / 03 / 24
오늘 수업 시간에는 그동안 배웠던 기본적인 내용으로 투두리스트를 제작하였습니다.
투두리스트를 리액트로 제작해보니까 조금 더 이해할 수 있는 시간이었습니다.
제 나름대로 이해하기 쉽게 정리하여 벨로그에 작성해보겠습니다.
💌 Lifting State Up
- React에서 컴포넌트 간에 상태를 공유해야할 때 사용되는 패턴입니다.
- 여러 컴포넌트에서 동일한 데이터를 사용할 때, 각 컴포넌트에 상태를 상위 컴포넌트로 상태를 끌어올려서 관리하고, 그 상태를 하위 컴포넌트로 전달하는 방식입니다.
- 상위 컴포넌트가 데이터를 관리하고, 그 데이터를 필요로하는 하위 컴포넌트들에 props를 통해 전달하는 방식으로, 여러 컴포넌트 간에 상태를 일관되게 유지하고, 데이터를 공유할 수 있게 해줍니다.
1. 사용 이유
1. 상태 관리의 일관성 유지
- 여러 컴포넌트에서 동일한 데이터를 다룰 때, 각 컴포넌트가 독립적으로 상태를 관리하면 불일치가 발생할 수 있습니다.
- Lifting State Up을 통해 한 곳에서 상태를 관리하면 일관된 상태를 유지할 수 있습니다.
2. 컴포넌트 간 데이터
- 하위 컴포넌트들이 상위 컴포넌트의 상태를 공유하고, 그 상태를 기반으로 동작을 변경하려면 Lifting State Up이 필요합니다.
3. 상위 컴포넌트의 데이터 흐름 관리
- 상위 컴포넌트가 하위 컴포넌트로 데이터 전달합니다.
- 해당 데이터를 수정할 수 있는 함수도 전달합니다.
- 상위 컴포넌트는 하위 컴포넌트의 상태 변경을 관리할 수 있습니다.
2. 작동 원리
1. 상위 컴포넌트에서 상태 정의
- 데이터를 관리할 상위 컴포넌트에서 useState를 사용해 상태를 정의합니다.
2. 상위 컴포넌트에서 상태를 관리하는 함수 정의
- 데이터를 수정하는 함수를 상위 컴포넌트에서 정의하고, 이를 하위 컴포넌트로 전달합니다.
3. 하위 컴포넌트에서 상태값을 props로 받아 사용
- 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 상태 값을 props를 통해 사용합니다.
4. 상위 컴포넌트에서 상태 변경 시 하위 컴포넌트에 전달
- 상태가 변경되면 React는 자동으로 해당 상태를 사용하는 모든 컴포넌트를 다시 렌더링합니다.
💌 실습 예제
To-Do List 만들기
- React를 사용하여 간단하게 To-Do List를 만들어보았습니다.
1. App.jsx
상위 컴포넌트(App)에서 상태 정의 및 관리
function App() { const [todos, setTodos] = useState([]); // App 컴포넌트에서 todos 상태 정의 return ( <div className="mobile-container"> <Header /> <Main todos={todos} /> {/* 하위 컴포넌트에 상태값과 상태 변경 함수 전달 */} <Footer setTodos={setTodos} /> </div> ); }
- todos는 App 컴포넌트에서 관리되는 상태입니다.
- setTodos는 이 상태를 변경할 수 있는 함수입니다.
- todos와 setTodos는 하위 컴포넌트인 Main과 Footer에 props로 전달됩니다.
2. Main.jsx
Main 컴포넌트에서 상태 사용
function Main({ todos }) { return ( <main className="mobile-main"> {todos.length === 0 ? ( <p>할 일이 존재하지 않습니다.</p> ) : ( <ul className="mobile-list"> {todos.map((todo) => { return <Todo key={todo.id} todo={todo.text} />; })} </ul> )} </main> ); }
- Main 컴포넌트는 todos 상태를 props로 받아서 사용합니다.
- todos가 빈 배열일 경우 "할 일이 존재하지 않습니다."라는 메시지를 표시합니다.
- 값이 있을 경우 todos 배열을 map 메서드를 사용해 리스트 형태로 렌더링합니다.
3. Footer.jsx
Footer 컴포넌트에서 상태 변경 함수 사용
function Footer({ setTodos }) { const [text, setText] = useState(""); function handleChange(e) { setText(e.target.value); } function handleOnKeyUp(e) { if (e.key === "Enter") { setTodos((todos) => [ ...todos, { id: Math.random() + "", text: text, done: false }, ]); setText(""); // 입력 필드 비우기 } } return ( <footer className="mobile-footer"> <input type="text" className="todo-input" placeholder="할 일을 입력해주세요!" onChange={handleChange} onKeyUp={handleOnKeyUp} value={text} /> </footer> ); }
- Footer 컴포넌트는 setTodos 함수를 props로 받습니다.
- "Enter" 키를 눌렀을 때 새 할 일을 todos 배열에 추가하는 기능을 담당합니다.
- 새로운 할 일을 추가할 때, setTodos를 사용하여 todos 상태를 업데이트합니다.
4. Lifting State Up 사용
- Header, Main, Footer 각각의 컴포넌트가 todos 상태를 공유하고 있으며, 상태가 변경될 때마다 각 컴포넌트가 업데이트되기 위해서는 상위 컴포넌트인 App에서 상태를 관리하는 것이 필요합니다.
- todos 상태를 상위 컴포넌트에서 관리하면, Main 컴포넌트에서 todos를 props로 받아서 렌더링할 수 있고, Footer 컴포넌트에서는 setTodos 함수를 통해 상태를 업데이트할 수 있습니다.
💌 장점
1. 상태 관리의 일관성 유지
- 상태를 상위 컴포넌트에서 관리하면, 하위 컴포넌트에서 상태 변화를 실시간으로 반영할 수 있습니다.
2. 데이터 흐름의 명확화
- 상태가 상위 컴포넌트에 있고, 필요한 하위 컴포넌트에 props로 전달되므로 흐름이 명확합니다.
3. 코드 중복 감소
- 상태를 한 곳에서 관리하여 코드 중복을 줄일 수 있습니다.
💌 주의할 점
1. 상태를 상위 컴포넌트로 끌어올리는 것만이 목적이 아님
- 상태가 여러 컴포넌트에서 공유되어야 할 때만 사용하는 것이 좋습니다.
- 불필요하게 상태를 끌어올리면 오히려 코드가 복잡해질 수 있습니다.
2. 불필요한 렌더링 방지
- 상위 컴포넌트에서 상태를 관리하고 변경하는 과정에서 불필요한 렌더링을 피하려면, 상태를 나누어 관리하거나, useMemo, React.memo 등을 사용하여 성능 최적화를 고려할 필요가 있습니다.
53일차 후기
- 상위 컴포넌트에서 하위 컴포넌트로 props로 전달할 때, 하위 컴포넌트가 해당 값을 받기 위해서는 변수를 선언하거나, 구조분해가 이루어져야 하는데.. 구조 분해와 변수 선언, 한 태그로 묶여 있어야 하는 것, 심지어 return쓰는 것까지.. 모두 까먹습니다ㅠㅜ
- 덕분에 오류 띄우고 깨닫고를 반복하고 있습니다..ㅎ 언젠간 나아지겠죠? ꜀( ꜆´⌓`)꜆
- 상위에서 하위로는 데이터 전달이 가능하지만, 하위에서 하위는 불가능하답니다!
- 초반이라 괜찮은건지 몰라도 useState는 사용해볼수록 익숙해지는 것 같습니다.
- 지금은 간단한 To-Do List 만들기라서.. 아직은 괜찮은 것 같습니다.
- 하루씩 지나갈 때마다.. 수업을 따라갈 수 있을까.. 걱정이되는 것 같습니다. ʕっ˘൧̑˘ςʔ
૮꒰ ྀི〃´꒳`〃꒱ა