[React] 상태(state) 끌어올리기

상태(state) 끌어올리기란?

상위 컴포넌트의 상태 변경 함수 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 필요가 있다. 이땐 가장 가까운 공통 조상(컴포넌트)에서 state를 끌어올리는 것을 권장한다.

// 상위 컴포넌트
function LiftingState() {
  let [todo, setTodo] = useState([]);

  const addTodo = (newTodo) => {
    setTodo([...todo, newTodo]); // 1. state 수정함수 작성
  };

  return (
    <div>
      <NewMessageForm buttonClick={addTodo} />	// 2. 하위로 상태 변경 함수 전달
      <ul>
        {todo.map((item, index) => (
          <SingleTodo key={index} content={item} />
        ))}
      </ul>
    </div>
  );
}

// 하위 컴포넌트
function NewMessageForm({ buttonClick }) {
  let [message, setMessage] = useState("");

  const inputTodo = (e) => {
    setMessage(e.target.value);
  };

  const todoRegist = () => {
    buttonClick(message);	// 3. 전달받은 함수 실행할 변수 작성
  };

  return (
    <div className="input-container">
      <input onChange={inputTodo} />
      <button onClick={todoRegist}>등록하기</button> 4. 변수전달
    </div>
  );
}

function SingleTodo(props) {
  return <li>{props.content}</li>;
}