부모컴포넌트의 state를, 자식 컴포넌트에서 받아오기

//부모 컴포넌트
const App = () => {
    const [state, setState] = React.useState();

    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <button onClick={() => setState(Math.random(10))}>Click Me</button>
            <div>parent state: {state}</div>
            <Box num={state} />
        </div>
    );
};
export default App;

Box라는 자식 컴포넌트에 state를 props로 내려보낸다. 이 때 setState가 아니라 그냥 state를 보낸다.

2. 자식 컴포넌트에서는 받아온 props(부모컴포넌트의 state값)를 자식컴포넌트에서의 state디폴트값으로 쓴다.

//자식 컴포넌트
const Box = ({ num }) => {
    const [state, setState] = React.useState(num);

    return <div>child state ${state}</div>;
};

여기까지만 하면 부모컴포넌트에서의 state가 바뀌어도, 자식컴포넌트의 state는 바뀌지 않는다. 왜냐하면 useState는 처음 정의했을 때 딱 한번만 실행되는데, 받아온 props(부모컴포넌트의 state값)를 state로 맨 처음에 정의했기 때문이다.

3. useEffect를 이용해 props의 값이 바뀌는지 계속 감시한다.

const Box = ({ num }) => {
  const [state, setState] = React.useState(num);

  React.useEffect(() => {
    setState(num);
  }, [num]);

  return <div>child state ${state}</div>;
};

만약 props값이 바뀌었을 때는, 자식 컴포넌트의 state도 최신 props값으로 바꿔준다.

---

해당 게시물을 읽고 정리했습니다.
https://medium.com/@digruby/do-not-use-props-as-default-value-of-react-usestate-directly-818ee192f454