Props에 직접 setState를 넘기지 않는 이유

React를 사용하다보면 중 부모 컴포넌트의 State 값을 자식 컴포넌트에서 수정해야 하는 경우가 자주 발생한다. State 값을 자식에서 수정해야 할 경우 event 함수로 한번 감싸서 작업을 하는 것을 당연시 생각했지만 그 이유에 대해 명확하게 설명할 수 없어 작성한다.

 

20번째 줄의 자식 컴포넌트는 setState를 직접 넘긴 컴포넌트이고 21번째 줄의 자식 컴포넌트는 event 형태로 한번 감싸서 넘겨주는 컴포넌트이다.

 

1. Component의 독립성 유지

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

 

React 공식 문서에서 Component에 대해 설명하는 글이다. 이에 맞게 React를 React 답게 사용하려면 Component를 독립적이고 재사용성 있게 만들어야 한다.

 

자식 컴포넌트의 props에 부모 컴포넌트의 setState를 직접적으로 넘기게 될 경우 자식 컴포넌트는 부모 컴포넌트에 매우 종속적일 수 밖에 없다. 따라서 이를 이벤트 형태로 만들었을 때 자식 컴포넌트의 독립성이 유지된다.

 

2. 코드 변경의 유연성

위의 예시에서 number를 변경함과 동시에 alert를 띄워주려고 한다고 가정해보자. 이때 EventChildComponent의 경우에는 handleOtherCountChange 함수를 수정하면 해결되지만 DirectStateChildComponent는 props를 추가하거나 해당 컴포넌트 내부에서 이를 호출해야한다. 코드의 유연성을 고려했을 때 setState 직접 넘기는 형태는 비효율적이다.

 

3. setState의 비동기성

setState() does not always immediately update the component. It may batch or defer the update until later.

 

React 공식문서에 따르면 React는 state 값의 변경 감지를 비동기적으로 처리한다. 모든 state가 변할 때마다 리렌더링을 실행할 경우 성능 이슈가 매우 빈번하게 발생하기 때문이다. React는 이를 방지하고자 state 값의 변화를 한번에 묶어서 배치로 처리한다. (이때 배치 업데이트의 주기는 16ms이기에 우리는 이를 실시간 반영이라고 표현한다.)

 

자식 컴포넌트에서 부모의 state를 업데이트하는 함수를 호출할 경우 업데이트 되는 컴포넌트가 아닌 곳에서 비동기 함수가 호출되기에 예측이 불가능한 코드가 될 가능성이 있다.

 

결론

setState를 props에 직접 넘길 때 코드가 동작하지 않는 것은 아니다. 하지만 React의 컨셉인 독립적인 컴포넌트와 재사용성을 생각했을 때 Event 콜백을 사용해서 부모 컴포넌트에서만 state를 업데이트 하도록 하는 것이 좋은 코드 컨벤션을 유지하는 방법이다.

 

 

참조.

https://reactjs.org/docs/react-component.html#setstate

React.Component – React

https://stackoverflow.com/questions/50215364/can-we-pass-setstate-as-props-from-one-component-to-other-and-change-parent-stat

Can we pass setState as props from one component to other and change parent state from child component in React?

https://www.reddit.com/r/reactjs/comments/o3b7m5/newbie_question_is_it_a_bad_practice_to_pass_the/

[Newbie question] Is it a bad practice to pass the setState function to a child component?