ReactJS 그리고 LifeCycle

ReactJS는 라이프 사이클을 가지고 있습니다.

안드로이드 작업은 해본 분들이라면 매우 익숙한 개념일 텐데요.

오늘은 이것에 대해서 정리해 보도록 하겠습니다.

1.LifeCycle

ReactJS의 사이클은 크게 3가지로 나뉘는 데요.

mounting	처음으로 render가 될 대 호출됩니다.  이 과정에서 또 3가지 라이프 사이클 메소드가 호출되는데요.  아래의 3가지 메소드가 차례대로 호출되어 집니다.  - componentWillMount :  가장 먼저 실행되는 메소드로, render메소드를 호출하기 바로 전에 호출되어 집니다.       순서상 가장 먼저 실행되지만, 최초에 한번만 실행하므로 반복해서 render를 호출할 경우 처음에만 호출되어 집니다.     this.setState을 호출할 수 있습니다.  - render    - componentDidMount: render가 호출되어서 html로 UI를 그려지고 나서 호출되어집니다.    UI가 다 그려지고 나서 호출되므로, 여러가지 작업을 하기 좋은 타이밍을 제공합니다.   예를 들면, setTimeout이나 setInterval같은 메소드를 통해서 타이머를 set한다든지,    Ajax호출을 한다든지의 경우가 그렇습니다.
updating	컴포넌트는 두번째 render가 호출될 때 업데이트를 하는데요.  mounting때와 마찬가지로 이 사이클에서도, 호출되는 메소드들이 있는데요.  - componentWillReceiveProps : 메소드 이름처럼 props를 받게 되면 호출이 된다는 점이 특징입니다.     업데이트가 렌더되기 전에, 인자로 nextProps를 받아올 수 있으므로 값을 미리 체크해서,      특정 threshold를 넘어설 경우에만 this.setState를 호출해서 업데이트를 할 것인지 정할 수 있습니다.  - shouldComponentUpdate : 메소드 네임에 should가 들어가 있는 것을 보면 알 수 있지만,     계속 업데이트를 할 것인지 true혹은   false를 반환해 주어야 합니다.     false가 return되면 나머지 메소드들은 호출되지 않습니다.     이 메소드는 state와  props를 모두 인자로 받아오는데요.    nextProps와 nextState 이름으로 값들을 받아 옵니다.    그래서 이 값들이 변하였는지 확인한 후에, 변한 경우에만 true를 반환해서 다음 업데이트 메소드가 호출되서 render되도록 할 수 있습니다.     - componentWillUpdate : shouldComponentUpdate와 마찬가지로 nextprops와 nextState값을 인자로 받아올 수 있습니다.     주어진 props나 state값에 따라서, 화면컬러나 사이즈등에 따른 변화등을 주기에 좋은 위치입니다.  - render   - componentDidUpdate : render가 끝나고, html들이 로딩이 되었을 때 실행되는 메소드입니다.     이번에는 next가 아닌, prevProps와 prevState값이 인자로 전달됩니다.     componentWillUpdate와 같이 React 컴포넌트와는 직접적으로 관련되지 않은 부분들에 관한 작업을 하기 좋은 위치입니다.     렌더링 된 후에 할 것인지가 둘의 차이라고 할 수 있겠습니다.
unmounting	컴포넌트가 dom에서 제거 되기 직전에 호출되어 집니다.  여기서 호출되는 메소드는 단 하나인데요.  componentWillUnmount 입니다.  다시 초기화 해놓아야 하는 값이 있다면, 여기서 처리하면 좋습니다.  여기서도 prevProps와 prevState값을 인자로 넘겨 받을 수 있습니다.  무언가 setInterval과 같이 주기적으로 실행을 하던 것을 멈추기에도 좋은 위치이네요.   참고로 clearInterval에 대한 레퍼런스는 아래 링크를 참조해 주세요.   https://www.w3schools.com/jsref/met_win_clearinterval.asp

위에서 언급한 LifeCycle 중에서,

shouldComponentUpdate()을 예로 들면 다음과 같이 할 수 있습니다.

nextProps와 nextState를 인자로 받아서 변경된 값이 있으면 return true를 할 수 있는데요.

아래에서는 nextProps로 기존 props의 값과 변경된 값이 있으면 true가 나오도록 하였습니다.

2. 정리

어떤 앱을 만드느냐에 따라서는 ReactJS의 라이프사이클을 이용하면,

효율적으로 코딩을 할 수 있겠네요.

라이프 사이클과 관련한 정보는 이 글에서 계속 업데이트 하도록 하겠습니다.