✅ 리액트 생명주기(Life Cycle)
리액트 컴포넌트는 생명 주기(Life Cycle)를 가지고 있는데, 이는 컴포넌트가 생성되고 사용되고 소멸될 때까지 일련의 과정을 말합니다.
그리고 생명 주기는 크게 3단계로 나눌 수 있습니다
마운팅 ➡️ 갱신 ➡️ 언마운팅
✅ 마운팅(mounting)
마운팅(mounting)은 처음 DOM이 생성되고 웹 브라우저 상에 나타는 단계를 말합니다. 한 번만 실행되며, 다음과 같은 메소드가 실행됩니다.
-
constructor
컴포넌트의 생성자 메서드로, 컴포넌트가 생성될 때 가장 먼저 실행된다 -
getDerivedStateFromProps
rops로 받아온 값을 state에 동기화해주는 메서드 -
render
컴포넌트를 렌더링 해주는 메서드 -
componentDidMount
컴포넌트의 첫 번째 렌더링이 끝나면 호출되는 메서드
JS 라이브러리나 프레임워크 함수를 호출하거나 이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리할 수 있다
✅ 갱신(updating)
속성이나 상태가 변경되어 React 엘리먼트를 업데이트할 때 발생하며, 다음과 같은 경우에 실행됩니다.
- props가 바뀔 때
부모 컴포넌트에서 넘겨주는 props가 바뀔 때 - state가 바뀔 때
setState 함수를 통해 state가 업데이트될 때 - 부모 컴포넌트가 리 렌더링 될 때
자신에게 할당된 props 또는 state가 바뀌지 않아도 리렌더링된다 - this.forceUpdate로 강제로 렌더링을 트리거할 때
그리고 실행되는 메소드는 아래와 같습니다.
-
getDerivedStateFromProps
컴포넌트의 props나 state가 바뀌었을 때 호출 -
shouldComponentUpdate
props 또는 state를 변경했을 때, 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드 -
render
컴포넌트를 렌더링 해주는 메서드 -
getSnapshotBeforeUpdate
컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드로, 주로 업데이트하기 직전의 값을 참고할 때 활용 -
componentDidUpdate
리렌더링(업데이트) 작업이 완료된 후 실행하는 메서드
✅ 언마운팅(unmounting)
언마운팅(unmounting)은 DOM에서 제거되는 것을 말하며, 한 번만 실행됩니다.
- componentWillUnmount
컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드
출처
