리액트 라이프사이클 D2

getDerivedStateFromProps()

static getDerivedStateFromProps(props, state) {
  if (props.name !== state.name)
    return {name: props.name}
}

클래스 컴포넌트에서 사용할 수 있는 라이프사이클 메서드이다.
메서드의 이름처럼 props로부터 state값을 획득하는 작업이 이루어진다.

풀어 쓰면, props의 값을 state에 넣는 것이라고 볼 수 있다.

그렇다면, 어떻게 props의 값을 state에 넣을 수 있을까?

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'kim'
    }
  }
  
  getDerivedStateFromProps(props, state) {
  	if (props.name !== state.name)
      return {name: props.name}
    return null;
  }
}

<Child /> 컴포넌트를 만들었고 getDerivedFromProps()메서드를 생성했다.

function App() {
  const [name, setName] = useState('min');
  
  return (
    <>
    	<Child name={name}/>
      	<button onClick={() => setName('shelly')}>button</button>
    </>
  )
}

name={name}부분을 보자.
Child 컴포넌트는 props객체인 {name: 'min'}을 받았고 이 props는
getDerivedStateFromProps() 메서드로 패스되어 if문의 비교를 통해 props와 state의 값이 다를 때만 props값을 state값에 넣어 state를 업데이트한다.
button을 클릭하면 name이 shelly로 업데이트되고 getDerivedFromProps()를 통해 Child의 상태 name 또한 App 컴포넌트의 name의 값 shelly를 갖게 된다.

간략히 표현하자면, getDerivedStateFromProps()는 props를 state와 비교하고 서로 다르면 state를 업데이트 시켜주는 메서드이므로 부모로부터의 상태가 업데이트되면 자식의 상태도 같은 상태 값으로 동기화시킬 때 쓰는 메서드라고 볼 수 있을 듯 하다.

리액트 라이프사이클의 작동 순서를 참고해보자.
getDerivedStateFromProps()는
1. Mounting 은 1번째 렌더링이 진행되는 단계를 나타내는데 이때도 실행된다.
2. 업데이트로 인한 리렌더링때도 실행된다.
3. 해당 컴포넌트가 렌더링되면 자동으로 실행된다.