리액트 컴포넌트의 생명주기란
컴포넌트가 생성되고 소멸될 때까지의 과정이다.
(생성되고 -> 업데이트 -> 사라진다)
컴포넌트 생명주기의 3단계
- 마운트 Mount
나타나는 것, 컴포넌트가 생성되는 시점
constuctor() 컴포넌트가 생성될 때 처음으로 호출된다.
초기 상태를 설정하거나 메서드를 바인딩하는 등의 작업을 수행한다.
render() 컴포넌트의 UI를 렌더링 한다.
cpmponentDidMount() 컴포넌트가 DOM에 들어가고 호출된다.
- 업데이트 Update
컴포넌트의 상태나 속성props가 변경될 때 발생하는 단계
shouldComponentUpdate(prevProps,prevState)컴포넌트가 업데이트 된 후 호출된다.
(또는 forceUpdate() 강제 업데이트 함수 호출로 인해 컴포넌트 다시 렌더링 후 호출된다.)
이전 props와 state를 확인해 필요한 업데이트 작업을 수행한다.
- 언마운트 Unmount
사라지는 것, 상위 컴포넌트에서 현재 컴포넌트를 화면에 표시하지 않게 될 때
componentWillUnmount()함수가 호출된다.
DOM에서 제거되기 전에 호출된다. 이벤트 리스너 해제나 타이머 정리 등의 작업을 수행한다.
리액트 컴포넌트 생명주기를 알아야 하는 이유?
생명주기를 이해해야 컴포넌트의 상태를 적절히 관리할 수 있다.
상태를 업데이트 하는 시점과 방법을 정확히 이해하면 데이터 흐름을 에측하고 상태관리를 개선할 수 있다.
또한 생명주기 메서드를 최적화하여 불필요한 렌더링을 방지하고 성능을 향상시킬 수 있다.
shouldComponentUpdate()메서드를 활용해 렌더링을 필요한 경우에만 수행하도록 조절할 수 있다.
상태 관리 라이브러리와 효율적으로 연동하여 상태를 관리할 수도 있다.(ex.Redux의 connect()함수를 통한)
컴포넌트가 생성되고 제거될 때 초기화와 정리 작업을 수행할 수 있기에 좀 효율적인 상태, 리소스 관리를 할 수 있다.
'02_STUDY > React' 카테고리의 다른 글
[ React ] 카운트 값을 감소하는 함수, 음수값이 나오지 않도록 만들기 (0) | 2023.08.27 |
---|---|
[ React ] 리액트 함수형 컴포넌트의 훅 Hook에 대해서 ( useState, useEffect, useContext, useMemo, useCallback, useRef ) (0) | 2023.08.10 |
[ React ] 컴포넌트 상태 관리 :: State란, 왜 setState()로 state를 변경해야 할까? (0) | 2023.08.08 |
[ React ] 리액트 컴포넌트와 props :: 데이터 전달 및 재사용 가능한 UI구성 (0) | 2023.08.05 |
[ React ] 리액트의 Render에 대하여:: Virtual DOM과 리렌더링 (0) | 2023.08.05 |