리액트를 다루는 기술-7 (컴포넌트의 라이프 사이클)

라이프사이클 메서드의 이해

• 함수 컴포넌트는 제공하지 않음
• will: 작업 전 실행, did: 작업 후 실행

1. mount (생성 될 때)

2. update

• props, state가 변경 될 때
• forceUpdate()가 실행 될 때

3. unmount (제거 될 때)

 

---

라이프사이클 메서드 살펴보기

1. render()

• 컴포넌트의 view에 들어갈 요소들을 결정함

2. constructor

• 컴포넌트가 처음 mount 될때 실행되는 메소드

3. getDerivedStateFromProps

• props와 state를 동기화 함 ???
• 이전의 값과 비교하여 state를 업데이트 할지 결정함

4. componentDidMount

• mount 이후에 실행해야할 것들을 실행함
• 이벤트 리스너 등록, 엘리먼트 조작 등
  • 마운트 되지 않은 상태에서는 오류가 발생함
  • 화면이 없는 상태에서 이벤트와 엘리먼드를 조작할 수 없기 때문

5. shouldComponentUpdate

• 컴포넌트를 업데이트 할 것인지 결정하는 함수
• true가 반환 되면 업데이트를 진행함

6. getSnapshotBeforeUpdate

• 이 전의 컴포넌트와 현재의 컴포넌트 상태를 반환

7. componentDidUpdate

• 업데이트 이후에 실행하야 할 것들을 이 함수 내에서 실행해야함

8. componentWillUnmount

• 컴포넌트가 사라지기 전에 행동해야 할 것들을 실행

9. componentDidCatch

• 렌더링 도중 에러가 발생했을 때 실행됨
• 에러 UI를 보여 줄 수 있음