state 끌어올리기

리액트의 데이터 흐름

• 리액트의 데이터 흐름은 일반적으로 단방향 하향식 데이터 흐름을 가진다.
• 이말은 즉, state 등의 데이터가 부모에서 자식으로만 이동이 가능하다는 이야기이다.
• 하지만, 하위 컴포넌트에서 변경되는 state 를 참고하여 상위 컴포넌트에서 사용해야 하는 경우가 있다.

state 끌어올리기

• 하지만 위와 같은 경우 리액트의 데이터 흐름 규칙에 위배되는데, 어떻게 해야할까.
• 이때는 state 갱신함수가 포함된 함수를 props로 내려주어 하위 컴포넌트에서 실행하는 방법으로 해결한다.
• 이를 state 끌어올리기(lifting state up) 이라고 한다.

과정

1. 하위 컴포넌트의 props 로 갱신함수가 포함된 함수를 전달하고,
2. 하위 컴포넌트의 데이터를 인자로 사용하여 호출하면, 상위 컴포넌트 함수에 데이터가 전달된다.
3. 그렇게 전달된 하위 컴포넌트의 인자(state)를 사용해서 상위 컴포넌트의 갱신함수를 실행하면,
4. 하위 컴포넌트에서 인자로 전달된 데이터의 내용을 상위 컴포넌트의 갱신함수가 사용하여 상위 컴포넌트의 state를 변경 할 수 있다.

import { useState } from "react";

const Parent = () => {
  const [text, setText] = useState("hi");
  const change = (el) => {
    setText(el);
  };
  // 받은 인자를 이용하여 state 를 갱신하는 함수

  return (
    <div>
      <div>{text}</div>
      {// 버튼을 누르면 하위에서 전달받은 'hello' 로 내용이 변경된다.|
      <Child textChange={change} />
      {// 함수를 하위 props로 전달함}
    </div>
  );
};

const Child = ({change}) => {
  return <button onClick={() => change("hello")}>button</button>;
};
// Child 는 하위 컴포넌트이지만, 인자를 통해 상위 컴포넌트로 데이터를 전달할 수 있다.

export default function App() {
  return (
    <div className="App">
      <Parent />
    </div>
  );
}
// 렌더링될 영역

+

• props도 일종의 인자전달 이므로, state 를 변경하는 함수를 전달하는 것은 함수를 인자로 사용하는 것과 같으므로 콜백함수라고 이야기 할 수 있다.
• 이벤트를 이용하여 전달하는 경우 바로 호출 연산자를 붙히게 되면 바로 실행되므로, 반드시 화살표함수로 처리하여 사용하자.

<button onClick={function()} />
// 이 처럼 작성하는 렌더링과 동시에 함수가 실행된다.

<button onClick={function} />
<button onClick={() => function()} />
// 그러므로, 이와 같이 처리하자.

• 상위 컴포넌트에서 전달된 함수가 인자를 어떻게 받는지도 고려해야한다.
  → 매개변수의 갯수, 구조분해 할당을 이용하는 경우 어떤 데이터 타입으로 인자를 받는지.