공식 문서 정리라고 읽고 freecodecamp 자료 정리라고 쓴다
함수 컴포넌트로 정리된 내용이 더 공부하는 데에 좋을 것 같아서 이번 내용은 freecodecamp의 내용을 정리해보았다
원문: https://www.freecodecamp.org/news/what-is-lifting-state-up-in-react/
아래 예시는 TodoList App이다.
App.js 구성
- TodoCount.js : 할일의 개수를 표시하는 컴포넌트
- TodoList.js: 저장된 할일 목록을 보여주는 컴포넌트
- AddTodo.js: 새로운 할일을 저장하는 폼 컴포넌트
function App() {
return (
<>
<TodoCount />
<TodoList />
<AddTodo />
</>
);
}
function TodoCount() {
return <div>Total Todos: </div>;
}
function TodoList() {
const [todos, setTodos] = React.useState(["item 1", "item 2", "item 3"]);
return (
<ul>
{todos.map((todo) => (
<li key={todo}>{todo}</li>
))}
</ul>
);
}
function AddTodo() {
function handleSubmit(event) {
event.preventDefault();
const todo = event.target.elements.todo.value;
console.log(todo);
}
return (
<form onSubmit={handleSubmit}>
<input type="text" id="todo" />
<button type="submit">Add Todo</button>
</form>
);
}
이제 아까 App.js를 다시 보자.
App.js 구성
- TodoCount.js : 할일의 개수를 표시하는 컴포넌트
-> todos라는 state array의 length 필요- TodoList.js: 저장된 할일 목록을 보여주는 컴포넌트
-> todos array 필요- AddTodo.js: 새로운 할일을 저장하는 폼 컴포넌트
-> todos array 업데이트 위해 필요
--> 세 컴포넌트 모두 todos라는 state를 공유해야 할 필요가 있다.
--> 하지만 state는 부모에서 자식으로만 전달해 줄 수 있기 때문에 부모 컴포넌트 App.js에 todos state를 저장하고 props로 전달한다.
---> AddTodo.js의 경우 todo state를 수정하는 setState만 필요하기 때문에 setState만 props로 전달한다.
function App() {
const [todos, setTodos] = React.useState(["item 1", "item 2", "item 3"]);
return (
<>
<TodoCount todos={todos} />
<TodoList todos={todos} />
<AddTodo setTodos={setTodos} />
</>
);
}
function TodoCount({ todos }) {
return <div>Total Todos: {todos.length}</div>;
}
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo}>{todo}</li>
))}
</ul>
);
}
function AddTodo({ setTodos }) {
function handleSubmit(event) {
event.preventDefault();
const todo = event.target.elements.todo.value;
setTodos(prevTodos => [...prevTodos, todo]);
}
return (
<form onSubmit={handleSubmit}>
<input type="text" id="todo" />
<button type="submit">Add Todo</button>
</form>
);
}