React - class의 life cycle(라이프 사이클) - componentDidmount, componentWillmount ...

 

 React, class의 life cycle로 여러가지가 있습니다.

 

 componentDidmount()는 컴포넌트가 마운트된 직 후에 호출됩니다. 외부에서 데이터를 불러와야 한다면 네트워크 요청을 보내기 적절한 위치라고 할 수 있습니다.

 

 componentWillmount()는 마운트가 발생하기 전에 호출됩니다. render가 실행되기 전에 실행되기 때문에 이 메서드 안에서는 setState를 사용하더라도 추가적인 랜더링이 발생하지 않으니 주의해주세요

 

 componentDidUpdate()는 갱신이 일어난 직후에 호출됩니다. (! 최초 랜더링에서는 호출되지 않음)

 

 componentWillUnmount()는 컴포넌트가 마운트 해제되어 제거되기 직전에 호출됩니다.(! 여기서는 setState를 쓰면 안돼요.)

 

등 많은 메서드들이 존재합니다. 

만약 willmount와 didmount 를 사용한다면 순서는 어떻게 될까요 ???

 

한번 확인해 보겠습니다.

app.js

console창

짜잔 ~ 정답은 constructor > will > render > did순으로 됩니다. 다들 맞추셧나요 ? ㅎㅎ

 

위의 오류는 왜 발생하였냐면 요새는 UNSAFE_componentWillMount를 사용한다고 해요. 기존의 이름은 17버전까지 유지된답니다. 컴포넌트를 최신문법으로 바꾸고 싶다면 rename-unsafe-lifecycle codemod를 사용하면 됩니다.

 

다들 열코하세요