JS' 공부흔적
[React] 라이프사이클 메서드에 대하여 본문
모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 크게 3가지로 분류할 수 있는데, 마운트, 업데이트, 언마운트가 그 3가지이다. 마운트는 컴포넌트가 생성되고 DOM이 업데이트되어 웹 브라우저 상에 나타나는 것이다. 업데이트는 말 그대로 컴포넌트를 업데이트하는 것이다. 언마운트는 마운트의 반대 개념으로, 컴포넌트를 DOM에서 제거하는 것이다. 총 9가지가 있는데 참고로 이는 클래스형 컴포넌트에서만 사용이 가능하다. 함수 컴포넌트에서는 Hooks를 사용한다. 오늘은 클래스형 컴포넌트에서 쓰이는 라이프사이클 메서드 9가지를 알아보자.
1. render()
최종적으로 작업한 UI를 렌더링하는, 즉 리액트 요소를 반환하는 메서드이다. 따라서 라이프사이클 메서드 중 유일하게 필수 메서드이다. render 사용 시에 주의할 사항이 있는데, setState를 하면 안 된다는 것이다. 또한 DOM에 접근할 수도 없다. setState 및 DOM 접근을 위해서는 아래에서 다룰 componentDidMount에서 처리해야 한다. render 메서드는 컴포넌트가 마운트될 때와 업데이트될 때(리렌더링) 호출된다.
2. constructor(props)
컴포넌트가 만들어질 때, 즉 마운트될 때 처음으로 실행된다. 이때 초기 state값을 정할 수 있다.
3. getDerivedStateFromProps(nextProps, prevState)
props로 받아온 값을 state에 적용하는 용도로 사용된다. props 값과 state 값이 다르면 state를 변경한다. 컴포넌트가 마운트될 때와 업데이트될 때 호출된다.
4. componentDidMount()
컴포넌트가 만들어진 후에 첫 렌더링이 끝나면 실행된다. (컴포넌트가 마운트될 때 호출된다.) 이때 다른 라이브러나 프레임워크 함수를 호출하거나, 비동기 작업을 처리한다.
5. shouldComponentUpdate(nextProps, nextState)
props나 state를 변경했을 때, 리렌더링을 할지 여부를 정하는 메서드이다. 반드시 true or false를 반환해야 한다. 기본적으로는 true를 반환하며, false를 반환하면 리렌더링이 되지 않는다. 리렌더링 후 새로 설정될 props나 state를 nextProps, nextState로 접근할 수 있다. 컴포넌트가 업데이트될 때 호출된다.
6. getSnapshotBeforeUpdate(prevProps, prevState)
render 메서드를 통해 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출된다. 여기에서 반환된 값은 바로 아래에서 다룰 componentDidUpdate의 3번째 파라미터로 전달받을 수 있다. 이는 주로 업데이트 직전의 값을 참고할 일이 있을 때 사용된다. 컴포넌트가 업데이트될 때 호출된다.
7. componentDidUpdate(prevProps, prevState, snapshot)
리렌더링을 완료한 후에 실행된다. prevProps, prevState로 컴포넌트가 이전에 가졌던 값에 접근할 수 있다. 또한 snapshot을 통해서 업데이트 직전의 값도 접근할 수 있다. 컴포넌트가 업데이트될 때 호출된다.
8. componentWillUnmount()
컴포넌트를 DOM에서 제거할 때 실행된다. 따라서 컴포넌트가 언마운트될 때 호출된다. 등록했던 이벤트, 타이머, DOM 등을 여기서 제거해야 한다.
9. componentDidCatch(error, info)
컴포넌트 렌더링 도중 에러가 발생했을 때, 오류가 눈에 보이도록 해 준다. error는 어떤 에러인지를 나타내고, info는 어떤 코드에서 오류가 발생했는지를 나타낸다. 여기서 중요한 것은 컴포넌트 자신에게 발생하는 에러를 잡아낼 수 없고, props로 넘어오는 컴포넌트에서 발생한 에러만 잡아낼 수 있다는 것이다.
