리액트 컴포넌트는 탄생부터 죽음까지 여러 지점에서 개발자가 작업이 가능하도록 메서드를 오버라이딩 할 수 있게 해줍니다.
아래 이미지는 버전 16.3 이전 생명주기를 그린 것입니다.
이미지를 보면 준비를 끝내고(initialization) compoentWillMount는 그려지기 직전 그 후 render는 그려지는 부분, componentDidMount는 그려진 직후입니다. (이후 버전에서 componentWillMount가 getDerivedStateFromProps로 이름이 바뀝니다.) componentDidMount의 경우 타이머, API 호출, 렌더된 후 최초로 할 일 등을 구현해줍니다.
updating 부분은 props가 바뀌거나 state가 바뀌었을 때 주기를 나타냅니다. props 바뀔 때가 한 단계가 더 많습니다. componentWillReceiveProps 빼고는 나머지는 같습니다. (이후 버전에서 componentWillReceiveProps가 getDerivedStateFromProps로, componentWillUpdate는 getSnapshotBeforeUpdate로 이름이 바뀝니다.)
그 후 컴포넌트는 죽기 직전 componentWillUnmount가 실행됩니다. componentWillUnmount에서는 타이머 클리어 등을 구현해줍니다.
'REACT' 카테고리의 다른 글
| Styled Component 장점과 단점 (2) | 2021.02.05 |
|---|---|
| JSX 규칙 (0) | 2020.12.14 |
| React란? (2) | 2020.12.14 |