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. 해당 컴포넌트가 렌더링되면 자동으로 실행된다.