[React] useState 초기값이 undefined이 되는 오류

문제 상황

props로 전달한 값을 state의 초기값으로 사용하였다.

하지만 state 값은 props로 전달된 값 다르게 undefined로 설정되었다.

원인

useState(initialValue)에서 initialValue는 첫번째 렌더링에서만 사용된다.

그 후에는, props로 전달된 intialValue 값이 변하더라도 적용되지 않는다.

props가 바뀌면 재렌더링이 일어나지 않나요?

부모 컴포넌트의 state를 props로 전달한 경우만 재렌더링이 일어난다.

위의 경우는 부모 컴포넌트의 state를 전달한 것이 아니라 변수를 전달했기 때문에 렌더링이 다시 일어나지 않는다.

---

해결 방법

1. useEffect

useEffect 사용해서 props로 전달된 initialValue가 변경되면 setState로 상태를 변경해준다.

export function SearchForm({ id, title, value, onChange }) {
  const [searchText, setSearchText] = useState(value);
  
  useEffect(() => {
    setSearchText(value);
  }, [value]);
}

 

2. 조건문

조건문을 사용해서 props와 상태가 다르면 setState로 상태를 props와 일치시켜줄 수 있다.

하지만 props 변화에 따라 상태를 설정해주는 것은 안티패턴이기 때문에 권장하지 않는다.

export function SearchForm({ id, title, value, onChange }) {
  const [searchText, setSearchText] = useState(value);
  
  if (searchText !== value) {
    setSearchText(value);
  }
}

 

원하는 대로 props와 state 값이 일치되는걸 확인할 수 있다. 😎

 

참고

https://stackoverflow.com/questions/58818727/react-usestate-not-setting-initial-value

React - useState not setting initial value