[React] Don’t mirror props in state

Choosing the State Structure 챕터를 읽던 중, 흥미로운 부분 발견!

prop?

function message({ messageColor })

위와 같이 부모 컴포넌트로 부터 메시지 색상의 prop을 전달 받아 사용할 때가 있다.

예를 들어, message 함수가 화면에 "Hello!"를 출력한다고 가정하자!

1. messageColor="red" 인 경우, 빨간색의 문구를 출력
2. messageColor="blue" 인 경우, 파란색의 문구를 출력

부모 컴포넌트에서의 변경된 상태에 따른 자식 컴포넌트의 변신을 필요로 할 때 전달 받은 prop에 의존하게 된다.

props mirroring?

const [color, setColor] = useState(messageColor);

별 생각없이 prop을 통해 전달 받은 상태를 저장해서 사용하는 방식은 큰 혼란을 가져올 수 있다!!

위 코드는..
useState 내부에 작성된 값(prop)을 color에 저장해 사용한다는 것!!
자식 컴포넌트에서 color 값의 핸들링을 하겠다고 선언하는 것이나 마찬가지 라는 것!!

부모 컴포넌트의 messageColor 값이 변경되어도, 자식 컴포넌트의 color에는 영향을 줄 수 없다는 것!!

그림과 같이, 벽이 생긴다고 생각하면 될 듯..?

부모 컴포넌트로 부터 전달받은 상태를 초기값으로 지정해 독립적으로 상태 값을 핸들링하고 싶을 때 props mirroring을 사용하면 된다.

부모 컴포넌트의 상태 변경을 자식 컴포넌트에도 영향을 주고 싶다면?

useState를 사용하지 않고, 전달 받은 값을 바로 사용하거나 const 키워드를 통해 선언해 사용하는 방법이 있다.

결론

1. 부모 컴포넌트와 값을 동기화하고 싶다면 props mirroring 피하기!
2. 부모 컴포넌트로 부터 받은 값을 초기 값으로 지정하고, 이후 독립적으로 핸들링하고자 한다면 props mirroring 사용!