리액트 라이프사이클
LifeCycle 이란 한국어로 생명주기 라고 부른다. 리액트 생명주기는 컴포넌트가 브라우저 상에 나타나고(mount), 업데이트되고(update), 사라지는(unmount) 것이다.
리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다 보니 각 컴포넌트에는 라이프사이클, 즉 컴포넌트의
수명 주기가 존재한다.
라이프사이클의 분류
위 그림이 전반적인 리액트 라이프사이클의 모습이다...
처음에 말했듯이 라이프사이클은 mount, update, unmount 3가지로 크게 나눌 수 있다.
여기서 mount란 DOM이 생성되고 웹브라우저 상에서 나타나는 것, 반대로 unmount는 DOM에서 제거되는 것을 뜻한다.
주의할 부분은 업데이트 부분이다.
1. props가 바뀔 때
2. state가 바뀔 떄
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거 할 때
라이프사이클 메서드
- constructor
컴포넌트를 만들 때 처음으로 실행되는 constructor(생성자)이다. 이 메서드는 초기 state를 정할 수 있다. Class형에서는 초기 state를 정할 때 constructor를 사용해야 한다. 하지만 함수형에서는 useState hook을 사용하면 초기 상태를 쉽게 설정해줄 수 있다.
-
getDerivedStateFromProps
공식 문서에 따르면 필요하지 않을 수 있지만 드물게 수행하는경우 라고 나와있다. 잘 쓰는 녀석은 아닌거 같다. props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트될 때와 업데이트 될 때 호출된다. -
shouldComponentUpdate
이 메서드는 props나 state를 변경했을 때, 리렌더링을 할지 말지 결정하는 메서드이다. 이 메서드에서는 반드시 true나 false를 반환해야한다. 이 메서드는 오직 성능 최적화만을 위한 것이며 렌더링 목적을 방지하는 목적으로 사용하게된다면 버그로 이어질 수 있다. 함수형에서 props는 React.memo, state는 useMemo를 활용하면 렌더링 성능을 개선할 수 있다고 한다. -
render
이는 가장 기초적인 메서드이기도하고 가장 중요한 메서드이기도 하다. 컴포넌트를 렌더링할 때 필요한 메서드로 유일한 필수 메서드이기도 하다. 함수형 컴포넌트에서는 render를 안쓰고 컴포넌트를 렌더링할 수 있다. -
getSnapshotBeforeUpdate
이 메서드는 render에서 만들어진 결과가 브라우저에 실제로 반영되기 직전에 호출된다. 이 메서드에 대한 사용 예는 흔하지 않치만, 채팅 화면처럼 스크롤 위치를 따로 처리하는 작업이 필요한 UI 등을 생각해 볼 수 있다고 한다. -
componentDidMount
이 메서드는 컴포넌트를 만들고 첫 렌더링을 마친 후 실행한다. 함수형 에서는 useEffect를 활용하여 기능을 구현 할 수 있다. -
ComponentDidUpdate
이것은 리렌더링을 완료한 후 실행한다. 업데이트가 끝난 직후이므로, DOM관련 처리를 해도 무방하다. -
componentWillUnmount
이 메서드는 컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다. 함수형 컴포넌트에서는 useEffect CleanUp 함수를 통해 해당 메서드를 구현할 수 있다. -
componentDidCatch
마지막으로 맨 위의 사진에는 보이지 않지만 componentDidCatch라는 메서드가 존재한다. 이 메서드는 컴포넌트 렌더링 도중에 에러가 발생 했을 때 애플리케이션이 멈추지 않고 오류 UI를 보여줄 수 있게 해준다.
Reference
