[React] 부모 컴포넌트의 state를 자식 컴포넌트의 state로 initialize할 때 주의점

부모 컴포넌트에서 count라는 state를 갖고 있고 이를 prop를 내려줄 때, 자식 컴포넌트에서 이를 받아 state의 초기값으로 삼았다고 하자. 이후, 부모 컴포넌트에서 갖고 있는 count 값이 변동된다면 자식 컴포넌트가 표시하고 있는 state는 어떻게 될까? 변하지 않는다.

그 이유는 컴포넌트 생성자(constructer)는 컴포넌트가 마운트될 때 한 번만 실행되기 때문이다. constructer는 this.state의 초기값 적용, 인스턴스에 이벤트 처리 메서드를 바인딩 하기 위해 사용한다.

class ChildComponent extends Component {
  constructer() {
    super(props);
    this.state = { count: this.props.value }; 
  }

  render() {
    return (
        <div>I have {this.state.count} candies</div>
    );
  }
}

컴포넌트가 리렌더링된다고 생성자가 실행되지는 않는다. 부모 컴포넌트가 리렌더링될 때 자식 컴포넌트를 파괴하거나 재생성하지도 않는다. 리액트는 이미 렌더링된 자식 컴포넌트를 재활용할 뿐, 생성자를 호출하지는 않는다.

즉 정리하자면,

• 코드에서는 state를 set하고 있는 부분이 생성자(constructer) 내부에만 있고, 생성자는 컴포넌트가 마운트될 때에만 호출된다.
• 그러므로 현재 코드에서는 컴포넌트가 다시 마운트되지 않는 한 자식 컴포넌트가 갖고 있는 count 값은 변하지 않는다.
• 부모 컴포넌트의 state가 변하여서 리렌더링된다고 하더라도 자식 컴포넌트는 파괴되거나 재생성되지 않는다. 이미 렌더링된 컴포넌트가 재활용될 뿐이다.
• 그러므로 자식 컴포넌트의 state는 변하지 않는다.

해결 방법

이것을 해결하기 위해 클래스 컴포넌트에서는 componentWillReceiveProps 메서드를 사용하고, 함수형 컴포넌트에서는 useEffect 를 사용하고 부모 컴포넌트가 내려준 props를 디펜던시 어레이에 넣어서 자식 컴포넌트의 state를 업데이트 해주면 된다.

Ref

https://www.hackernoon.com/common-pitfall-in-initialising-state-based-on-props-in-react-js-d56795a944aa