[React] React 시작하기(8) - state 끌어올리기

리액트는 기본적으로 단방향 데이터 흐름을 가진다.

그렇기 때문에 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터로만 형태, 타입을 확인할 수 있다.

해당 데이터가 state로 전달받은 것인지 혹은하드 코딩으로 입력된 데이터인지는 확인이 불가능하다.

 

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

상위 컴포넌트의 상태 변경 함수 그 자체를 하위 컴포넌트로 전달하고,

이 함수를 하위 컴포넌트가 실행하는 것이다.

 

동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야할 필요가 있다.

이땐 가장 가까운 공통 조상(컴포넌트)에서 state를 끌어올리는 것을 권장한다.

 

간단한 예제 참고!

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

  const addTodo = (newTodo) => {
    setTodo([...todo, newTodo]);
  };

  return (
    <div>
      <NewMessageForm buttonClick={addTodo} />	// 하위로 상태 변경 함수 전달
      <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);	// 전달받은 함수 실행
  };

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

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

 

적절한 예제를 만드느라 고민좀 했다.. 😞

아주아주 간단하게,

상위 컴포넌트로 부터 전달받은 함수를 하위 컴포넌트의 버튼 클릭 이벤트 발생시 실행시키는 간단한 TodoList를 구현했다.

 

이렇게 하위 컴포넌트에 props 로 상태변경 함수를 전달하게 되면

단방향 데이터 흐름 원칙을 지킬수 있게 되는 것이다.