공식 문서 정리라고 읽고 freecodecamp 자료 정리라고 쓴다
함수 컴포넌트로 정리된 내용이 더 공부하는 데에 좋을 것 같아서 이번 내용은 freecodecamp의 내용을 정리해보았다
원문: https://www.freecodecamp.org/news/what-is-lifting-state-up-in-react/

---

state 끌어올리기란?

• 개발하다보면 형제끼리 어떤 state를 공유해야할 경우가 있다
• state는 부모에서 자식으로만 주는 것이 가능
• 그래서 자식 컴포넌트에 정의했었던 state를 부모 컴포넌트에 저장하고 그 state를 props로 줘서 자식끼리 공유할 수 있게 하는 것

아래 예시는 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>
  );
}

자식 컴포넌트끼리 어떤 state를 공유해야할 경우, 부모 컴포넌트로 state 끌어올리기가 필요함

state 끌어올리기를 사용하면 redux나 react context같은 상태 관리 라이브러리를 사용하지 않고도 공유하는 state를 관리할 수 있다