리액트 라이프 사이클
리액트의 컴포넌트는 생명 주기가 있다. 생애 주기 또는 라이프 사이클이라고도 한다. 리액트 앱을 개발하면서 렌더링 직전에 특정한 작업을 해야 하거나, 컴포넌트 업데이트 전후에 처리해야 할 작업이 있을 수 있는데, 이때 리액트 컴포넌트 라이프 사이클 관련 함수들을 이용하면 이를 처리할 수 있다. 아래 표 내부 단계에 따라 다양한 종류의 라이프 사이클 함수가 있다는 것을 확인할 수 있다.
컴포넌트 라이프 사이클은 크게 Mount, Update, UnMount로 나뉜다.
1. 마운트(Mount)
마운트는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미한다. 이때 호출되는 함수는 아래와 같다.
- constructor : 컴포넌트 클래스의 생성자 함수로 컴포넌트를 만들 때 처음으로 호출되는 함수. state 초기값을 지정할 때 사용한다.
- getDerivedStateFromProps : props와 state 값을 동기화할 때 사용하는 함수
- render : 컴포넌트의 기능과 모양새를 정의하는 함수, 리액트 요소를 반환한다.
- componentDidMount : 컴포넌트를 생성하고 첫 렌더링이 끝낫을 때 호출되는 함수
2. 업데이트(Update)
컴포넌트가 업데이트 되는 시점에 호출되는 생명 주기 메소드들은 아래와 같다.
- getDerivedStateFromProps : 컴포넌트의 props나 state가 바뀌었을 때도 이 메소드가 호출된다.
- sholudComponentUpdate : 컴포넌트가 리렌더링 할지 말지 결정하는 메소드
- render
- getSnapshotBeforeUpdate : 렌더에서 만들어진 결과가 브러우저에 실제 반영되기 직전의 DOM 상태를 가져와서 특정 값을 반환하는 함수
- componentDidUpdate : 리렌더링이 끄나고 화면에 우리가 원하는 변화가 모두 반영된 뒤 호출되는 메소드. getSnapshotBeforeUpdate가 반환한 특정 값을 받아와서 사용할 수 있다.
3. 언마운트(UnMount)
언마운트라는 것은 컴포넌트가 화면에서 사라지는 것을 의미한다. 언마운트의 생명 주기 메소드는 하나이다.
- componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출되어 DOM에 직접 등록했던 이벤트를 제거해준다.
참고
25. LifeCycle Method · GitBook
25. LifeCycle Method LifeCycle Method 는 한국어로 "생명주기 메서드" 라고 부릅니다. 생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다.
react.vlpt.us
'React' 카테고리의 다른 글
| 리액트에서 배열 렌더링 시, key가 필요한 이유 (0) | 2023.10.22 |
|---|---|
| React Virtual DOM이란? (0) | 2023.10.19 |
