[React] useState 초기값으로 props를 사용하면 안된다.

props로 받아온 값을 useState의 초기값으로 사용하여 렌더링 할 때 값이 분명 변경되었는데 useState에 들어간 값이 변하지 않는 문제가 생겼다.

이유는 useState의 초기값으로 props를 사용했기 때문이다.

 

const Box = ({ num }) => {
	const [boxState, setBoxState] = useState(num);
    
    return <div>box State ${boxState}</div>;
};

const App = () => {
	const [parentState, setParentState] = useState();
    
    return (
    	<div className="App">
        	<div>parent state: {parentState}</div>
            <Box num={parentState} />
        </div>
    );
);

이렇게 Box컴포넌트에서 전달받은 num이라는 props를 useState의 초기값으로 할당하게 되면 App컴포넌트의 parentState가 변경되더라도 Box컴포넌트의 boxState는 변함이 없다.

 

useState는 한번만 호출되기 때문이다.

 

props로 useState에 초기값으로 할당하고 싶으면 useEffect를 사용해야 한다.

 

const Box = ({ num }) => {
	const [boxState, setBoxState] = useState(num);
    
    useEffect(() => {
    	setBoxState(num);
    }, [num]);
    
    return <div>box State ${boxState}</div>;
};

const App = () => {
	const [parentState, setParentState] = useState();
    
    return (
    	<div className="App">
        	<div>parent state: {parentState}</div>
            <Box num={parentState} />
        </div>
    );
);

useEffect를 사용해서 props로 받아오는 num값이 변경될 때마다 boxState를 변경해주어야 원하는 동작을 할 것이다.

 

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