[React] Props를 React.useState()의 초기값으로 할당하지 마세요.

오늘 state가 update 되었음에도 값이 화면의 출력은 변하지 않는 문제가 발생했다.

검색해보니 문제는 상위 컴포넌트에서 받은 props를 useState의 default value로 할당했기

때문이었다.

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

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

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>
    );
};

위 코드같이 App 컴포넌트에서 받은 props {num}을 Box 컴포넌트의 default value로 할당하면 App 컴포넌트의 button을 클릭해 num 값이 업데이트 되더라도 Box의 state는 변경되지 않는다.

왜냐하면, useState는 최초 한번만 호출되기 때문에 props값이 변경되더라도 Box의 state에는 영향을 주지 못하기 때문이다.

props로 값을 받아 state에 할당하고 싶다면?

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

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

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

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>
    );
};

useEffect를 이용하여 num값이 변경될 때마다 setState를 실행하여주면 된다.

원본: https://medium.com/@digruby/do-not-use-props-as-default-value-of-react-usestate-directly-818ee192f454

++