리액트 컴포넌트는 생성(Mount), 갱신(Update), 제거(Unmount) 주기를 가지게됩니다.
해당 주기에서 사용되는 메소드에 대해 알아보겠습니다.
생성(Mount)
constructor(props)
메소드를 바인딩 하거나 state를 초기화하는 작업이 없을 경우 사용합니다.
만약, 해당 작업이 없다면 사용하지 않아도됩니다.
getDerivedStateFromProps(nextProps, prevState)
props로 받아 온 값을 state로 넣어주고 싶을때 사용합니다.
state를 변경할 때는 setState가 아닌 반환 값으로 변경해야하며 반환 값이 null일 경우에는 아무일도 발생되지 않습니다.
render()
반드시 구현되어야하는 유일한 메소드입니다.
이 메소드가 호출되면 this.props와 this.state의 값을 활용하여 값을 반환합니다.
render는 컴포넌트의 state를 변경하지 않고 호출될 때마다 동일한 결과를 반환합니다.
해당 메소드는 브라우저와 직접적으로 상호작용하지 않습니다.
componentDidMount(prevProps, prevState)
컴포넌트가 생성된 직후에 호출됩니다. (즉, render 후에 호출)
setState를 통해 작업하면 render가 두번 호출되므로 DOM 노드가 있어야하는 초기 작업에 사용하는 경우를 제외하고는 setState를 사용하지 않습니다. (= state의 초기화는 constructor에서 작업합니다.)
데이터 구독을 설정하기 좋은 위치이며 componentWillUnmount()에서 구독 해제 작업을 반드시 수행해야합니다. (timer, fetch, axios 등)
갱신(Update)
getDerivedStateFromProps(nextProps, prevState)
생성과 동일
shouldComponentUpdate(nextProps, nextState)
컴포넌트 업데이트 직전에 호출되는 메소드입니다.
props 나 state가 변경 되었을 때 리렌더링 여부를 반환 값으로 정합니다.
*사용을 잘 안하는 이유
리액트 컴포넌트의 기본 동작은 매 state의 변화마다 다시 렌더링을 수행하는 것이기 때문에 잘 사용되지 않습니다.
해당 메소드는 성능 최적화를 목적으로 두고 있기 때문에 렌더링을 방지하는 목적으로 사용할 경우 버그로 이어질 수 있다. shouldComponentUpdate가 false를 반환하면 리렌더링이 일어나지 않으므로 그 다음 순서의 메소드들은 호출되지 않습니다.
render():
생성과 동일
getSnapshotBeforeUpdate(prevProps, prevState)
렌더링 결과가 실제 돔에 반영되기 직전에 호출됩니다.
메서드의 이름에서처럼 업데이트 되기 직전에 snapshot(props & states)을 확보하는게 목적입니다.
반환 값이 componentDidUpdate의 세번째 인자로 전달됩니다.
componentDidUpdate(prevProps, prevState, snapShot)
최초 렌더링에서는 호출되지 않으며 돔 요소가 업데이트 된 이후 호출되는 메소드입니다.
getSnapshotBeforeUpdate를 구현했고 리턴 값이 존재한다면 세번째 인자로 넘겨받으며 반환값이 없다면 해당 인자는 undefined입니다.
setState를 사용할 수 있지만 조건문으로 감싸지 않는 경우 무한루프가 되는 경우가 발생할 수 있으므로 주의해야합니다. 이전과 현재의 props를 비교하여 네트워크 요청을 보내야할 경우 이 메서드를 사용합니다.
제거(UnMount)
componentWillUnmount()
컴포넌트가 DOM에서 삭제된 후 실행되는 메소드로 소멸단계에서 호출되는 유일한 메소드입니다.
componentDidMout에서 생성된 작업등을 정리할 때 사용합니다. (timer, fetch, axios 등)
실행 직후에는 이제 컴포넌트가 리렌더링 되지 않으므로 setState를 사용하면 안됩니다.
오류처리 (공식문서)
제어 흐름 조작하는데 사용하면 안되며 해당 메소드들은 자기 자신(컴포넌트)에 대한 오류를 감지할 수 없고 하위에 존재하는 컴포넌트에 대한 오류만을 감지할 수 있습니다.
getDerivedStateFromError(error)
에러가 발생한 뒤 UI 렌더링을 제어하기 위해 사용한다.
componentDidCatch(error, errorInfo)
에러 정보를 기록하려고 사용합니다.
*공식사이트에서 설명하길, 해당 메소드에서 setState를 통해 UI를 렌더링 할 수 있으나 추후 릴리즈에서 사용할 수 없게할 것이라고 적혀있습니다.
참고
- ko.reactjs.org/docs/react-component.html
- velog.io/@kwonh/React-%EC%83%9D%EB%AA%85%EC%A3%BC%EA%B8%B02-%EC%97%85%EB%8D%B0%EC%9D%B4%ED%8A%B8%EB%8B%A8%EA%B3%84%EC%86%8C%EB%A9%B8%EB%8B%A8%EA%B3%84-shouldComponentDidUpdate-getSnapshotBeforeUpdate-componentDidUpdate-getDerivedStateFromError-componentDidCatch
- kim-mj.tistory.com/250