라이프사이클 시각화

Oblosys/react-lifecycle-visualizer

살펴 보기

render

• this.props와 this.state에 접근할 수 있으며 리액트 요소를 반환
• 이 메서드 안에서는 절대로 state를 변형해서는 안되며 브라우저에 접근해도 안된다.
• DOM 정보를 가져오거나 변화를 줄 때는 componentDidMount에서 처리해야 한다.

constructor

• 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행
• 이 메서드에서 초기 state를 정할 수 있음

getDerivedStateFromProps

• 16.3 버전 이후에 새롭게 만든 라이프사이클 메서드
• props로 받아온 값을 state에 동기화시키는 용도
• 컴포넌트를 마운트하거나 props를 변경할 때 호출

componentDidMount

• 컴포넌트를 만들고 첫 렌더링을 다 마친 후 실행
• 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출
  • ex) 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업

shouldComponentUpdate

• props 또는 state를 변경했을 때 리렌더링을 시작할지 여부를 지정하는 메서드