Front-end/면접 스터디
[FE면접/React] 리액트 라이프사이클(LifeCycle Method)
규투리
2023. 3. 29. 16:35
반응형
1. 라이프 사이클(생명주기)
💡 라이프 사이클(생명주기)이란?
'컴포넌트가 렌더링을 준비하는 순간부터 페이지에서 사라질 때까지' 를 뜻한다.
컴포넌트는 크게 세 가지 카테고리로 나뉜다.
1. 생성(Mount)
: DOM이 생성되고 웹 브라우저 상에 나타나는 것
2. 수정(Update)
: 컴포넌트가 업데이트 되는 경우
3. 제거(Unmount)
: 컴포넌트를 DOM에서 제거하는 과정
프로젝트에서 컴포넌트를 처음 렌더링할 때 어떤 작업을 처리해야 하는지, 또는 컴포넌트를 업데이트 하기 전후로 어떤 작업을 처리해야 하는지를 알아야 불필요한 업데이트를 방지할 수 있다.
그렇기 때문에 우리는 리액트의 라이프 사이클에 대해 알아야 한다.
2. React LifeCycle(리액트 라이프 사이클)
들어가기 앞서, 리액트 라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.
리액트 공식 메뉴얼에서는 클래스형 컴포넌트보다 함수형 컴포넌트를 권장하며, 우리 또한 개발 시 함수형 컴포넌트 형태로 개발하고 있을 것이다.
그렇다면 리액트 라이프 사이클은 필요없는 것이냐?
그것은 아니다.
React 16.8.0 버전부터는 React Hooks로 라이프 사이클 함수를 대체할 수 있다.
그렇기 때문에 리액트 라이프 사이클은 이런 것이 있다 정도로 알고 넘어가면 좋을 것 같다.
1. Mount
DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트(mount)라고 한다.
| constructor | 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 |
| getDerivedStateFromProps | props에 있는 값을 state에 넣을 때 사용하는 메서드 |
| render | UI를 렌더링 하는 메서드 |
| componentDidMount | 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 |
2. Update
컴포넌트가 업데이트 되는 경우는 다음 4 가지 경우가 있다.
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링을 트리거 할 때
| getDerivedStateFromProps | 이 메서드는 마운트 과정에서 호출되며, 업데이트가 시작하기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶은 경우에 사용한다. |
| shouldComponentUpdate | 컴포넌트가 리렌더링을 해야할지 말아야 할지 결정하는 메서드 true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지한다. 만약 특정 함수에서 this.forceUpdate() 함수를 호출하면 이 과정을 생략하고 바로 render 함수를 호출한다. |
| render | 컴포넌트 리렌더링 |
| getSnapshotBeforeUpdate | 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드 |
| componentDidUpdate | 컴포넌트 업데이트 작업이 끝난 후 호출하는 메서드 |
3. Unmount
마운트의 반대과정으로 컴포넌트를 DOM에서 제거하는 과정이다.
| componentWillUnmount | 컴포넌트가 웹 브라우저 상에서 사라지기 전에 호출하는 메서드 |
[참고]
https://ko.reactjs.org/docs/state-and-lifecycle.html
반응형