우선 자신의 PC 또는 서버에서 돌아가는 React 버전을 확인해보자
이유는 React 버전에 따라 Deprecate 된 함수가 있기 때문이다.
- React 프로젝트에서 확인 : {React.version}
- 터미널에서 확인 : yarn info react ( 단, yarn 이 설치되어 있어야 한다. )
* 터미널에서 yarn 확인 시 훨씬 (압도적으로) 많은 정보가 나온다.
가장 좋은것은 React 홈페이지의 공식 문서를 보는것이다.
기술적인 문서는 상당수가 영문만 지원되는 경우가 많지만, React 는 한글도 아주 풍부하게 제공하고 있다.
위 문서 링크에 있는 내용 중 일부를 발췌 하겠다.
(주의: React17 부터는 componentWillMount, componentWillUpdate, componentWillReceiveProps 라이프 사이클이
deprecate 된다. )
Mount
컴포넌트가 처음 실행될 때 그것을 Mount라고 표현합니다. 컴포넌트가 시작되면 우선 context, defaultProps와 state를 저장합니다. 그 후에 componentWillMount 메소드를 호출합니다. 그리고 render로 컴포넌트를 DOM에 부착한 후 Mount가 완료된 후 componentDidMount가 호출됩니다.
주의할 점은, componentWillMount에서는 props나 state를 바꾸면 안 됩니다. Mount 중이기 때문이죠. 그리고 아직 DOM에 render하지 않았기 때문에 DOM에도 접근할 수 없습니다.
componentDidMount에서는 DOM에 접근할 수 있습니다. 그래서 여기에서는 주로 AJAX 요청을 하거나, setTimeout, setInterval같은 행동을 합니다.
정리하면 다음 순서로 실행됩니다.
- state, context, defaultProps 저장
- componentWillMount
- render
- componentDidMount
Props Update
props가 업데이트될 때의 과정입니다. 업데이트되기 전에 업데이트가 발생하였음을 감지하고, componentWillReceiveProps 메소드가 호출됩니다. 그 후 shouldComponentUpdate, componentWillUpdate가 차례대로 호출된 후, 업데이트가 완료(render)되면 componentDidUpdate가 됩니다. 이 메소드들은 첫 번째 인자로 바뀔 props에 대한 정보를 가지고 있습니다. componentDidUpdate만 이미 업데이트되었기 때문에 바뀌기 이전의 props에 대한 정보를 가지고 있습니다.
shouldcomponentUpdate에서는 아직 render하기 전이기 때문에 return false를 하면 render을 취소할 수 있습니다. 주로 여기서 성능 최적화를 합니다. 쓸데없는 update가 일어나면 여기서 걸러내는 거죠.
주의사항이 있는데, componentWillUpdate에서는 state를 바꿔서는 안 됩니다. 아직 props도 업데이트하지 않았으므로 state를 바꾸면 또 shouldComponentUpdate가 발생합니다. componentDidUpdate에서는 render이 완료되었기 때문에 DOM에 접근할 수 있습니다.
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
State Update
setState 호출을 통해 state가 업데이트될 때의 과정입니다. props update와 과정이 같지만, componentWillReceiveProps 메소드는 호출되지 않습니다. 그리고 메소드의 두 번째 인자로는 바뀔 state에 대한 정보를 가지고 있습니다. componentDidUpdate는 두 번째 인자로 바뀌기 이전의 state에 대한 정보를 가지고 있습니다.
- shouldComponentUpdate
- componentWillUpdate
- render
- componentDidUpdate
Unmount
컴포넌트가 제거되는 것은 Unmount라고 표현합니다. 더는 컴포넌트를 사용하지 않을 때 발생하는 이벤트가 있습니다. componentWillUnmount가 그것입니다. componentDidUnmount는 없습니다. 이미 제거된 컴포넌트에서 이벤트를 발생시킬 수는 없겠죠? componentWillMount에서 주로 연결했던 이벤트 리스너를 제거하는 등의 여러 가지 정리 활동을 합니다.
- componentWillUnmount
다행히도 용도에 맞지 않는 메소드를 사용하면 React에서 자체적으로 에러 메시지를 띄워 줍니다. componentDidMount나 render에 setState를 사용한 경우도 에러 메시지를 띄웁니다. 그래도 혹시나 모를 상황에 대비하여 용도를 항상 알고 있는 게 좋겠습니다. 다음 시간에는 React-router에 대해 알아봅시다.
Error
에러 발생 시를 위한 componentDidCatch도 있습니다. 리액트 16에서 추가되었습니다.
componentDidCatch(error, info) {
console.error(error, info);
}위와 같이 사용하고, 최상위 컴포넌트에 한 번만 넣어주면 됩니다. 에러 발생 시 어떻게 대처할 것인지를 정의할 수 있습니다. 최소한 에러를 로깅하는 것만으로도 사용 가치가 있습니다.
아래는 공식 사이트에서 발췌된 내용중 일부이다.
마운트 (Mount)
아래 메서드들은 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출됩니다.
( Mount란 컴포넌트를 특정 영역에 삽입하는 행위이다.
예로 ReactDOM.render 함수를 통해서 DOM의 특정 영역에 React 컴포넌트를 삽입할 수 있고
이러한 과정을 마운트(Mount) 한다고 얘기한다. )
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
componentWillMount()는 deprecate 되었다.
* Deprecate 함수 설명 및 대체 함수
componentWillMount()
render() 가 실행되기 전에 호출되므로, 이 메서드 내에서 setState()를 동기적으로 호출하더라도 추가적인 렌더링이 발생되지 않는다. 공식 문서에서 권장하는것은 componentDidMount() 를 대신 사용하라고 한다. * componentDidMount() 는 서버 렌더링에서 호출되는 유일한 생명주기 메서드 이다. |
업데이트
props 또는 state가 변경되면 갱신이 발생합니다. 아래 메서드들은 컴포넌트가 다시 렌더링될 때 순서대로 호출됩니다.
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
componentWillUpdate()는 deprecate 되었다.componentWillReceiveProps() 는 deprecate 되었다.
* Deprecate 함수 설명 및 대체 함수/방법
componentWillReceiveProps()
그러나 이 메서드를 사용하면 버그를 만들거나 일관성을 해칠 수 있다. - props 변화에 대응한 효과를 발생시켜야 한다면 (Ex: 데이터를 가져오기 또는 에니메이션 등...) componentDidUpdate() 생명주기를 사용하기를 권한다. - props가 변화할 때 일부 state를 재설정하기 위해서는 완전 제어 컴포넌트 또는 Key를 사용하는 완전 비제어 컴포넌트를 만들어서 사용하라고 공식 문서는 권한다. |
componentWillUpdate()
이 메서드는 초기 렌더링에서는 호출 되지 않는다. 또한 이 메서드 내에서는 this.setState() 를 호출 할 수 없다. 또한 React 컴포넌트가 갱신되도록 만드는 그 어떤 작업eh 이루어 져서는 안된다. 만약 메서드내에서 DOM 에 대한 정보 획득 (Ex: 스크롤 위치 저장 등..) 을 하려 한다면 getSnapshotBeforeUpdate() 를 사용하는것이 가능하다. |
위 내용들은 아래 링크인 React 공식 홈페이지에서 발췌해 왔다.
아래 링크를 통해 공식 문서를 천천히 살펴보기를 강력하게 권한다.
React.Component – React
A JavaScript library for building user interfaces
ko.reactjs.org
마지막으로 React LifeCycle 에 대한 이미지로 마무리 하겠다.
[ 일반적인 React LifeCycle ]
[ 덜 일반적인 React Life Cycle ]
