[React]Props를 state에 미러링하면 안되는 이유

예시 코드

function Message({ messageColor }) {
  const [color, setColor] = useState(messageColor);

위의 코드에서 color state 변수는 messageColor prop로 초기화됩니다. 문제는 부모 컴포넌트가 나중에 다른 값의 messageColor를 전달한다면 (예를 들어, 'blue' 대신 'red'), color state 변수 가 업데이트되지 않는다! 왜냐하면, State는 첫 번째 렌더링 중에만 초기화되기 때문이다.

그 때문에 state 변수의 일부 prop를 “미러링”하면 혼란이 발생할 수 있다. 대신 코드에 messageColor prop를 직접 사용하자. 더 짧은 이름을 지정하려면 상수를 사용하자.

function Message({ messageColor }) {
  const color = messageColor;

이렇게 하면 부모 컴포넌트에서 전달된 prop와 동기화를 잃지 않는다.

Props를 상태로 “미러링”하는 것은 특정 prop에 대한 모든 업데이트를 무시하기를 원할 때에만 의미가있다.