이전 포스트와 연결되는 내용입니다.
getDerivedStateFromProps는 최초 마운트 시와 갱신 시 모두에서 render 메서드를 호출하기 직전에 호출됩니다.
state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무 것도 갱신하지 않을 수 있습니다.
App.js 파일
LifecycleEx006.js 파일
getDerivedStateFromProps(props,state) 함수는 constructor() 함수 다음으로 실행됩니다.
컴포넌트가 새로운 props를 받게 됐을 때 state를 변경해줍니다.
App.js에서 전달한 prop_value라는 변수를 props.prop_value로 접근해 값을 가져올 수 있습니다.
콘솔 창을 확인해봅시다.
현재 공부하고 있는 책에서는 이와 같은 Warining이 뜨지 않지만 ...
경고는 찝찝하니까 한번 해결해보겠습니다.
경고문을 보니 무조건 반환을 해야 하는 것 같습니다.
반환은 갱신한 state 또는 null을 반환할 수 있습니다. (null 은 갱신하지 않을 때 )
return state ; 추가
다시 콘솔창을 열어보면 ...!
Waring이 없어졌고 , constructor 다음으로 잘 실행되는 것을 볼 수 있습니다.
waring을 해결하려고 구글링을 좀 해봤는데 특수한 케이스에만 사용되고 자주 사용되는 것 같지는 않네요 ㅎㅎ
오늘도 즐공합시다 !!
'리액트' 카테고리의 다른 글
| 리액트 생명주기 함수 다이어그램 (0) | 2023.01.24 |
|---|---|
| 리액트 생명주기 함수 componentDidMount() 사용하기 (0) | 2023.01.24 |
| 리액트 생명주기 함수 constructor(props) 사용하기 (0) | 2023.01.17 |
| 리액트 생명주기 함수 render() 사용하기 (0) | 2023.01.17 |
| 리액트 Component 사용하기 (0) | 2023.01.17 |
