React LifeCycle

리액트를 실행시킨 후 자바스크립트가 로딩이 되면서 JSX파일이 보이기 시작한다

이때 돌아가는 라이프사이클을 알게 되면 컴포넌트 업데이트 관련하여 추후에 유지보수 때 큰 효과를 볼 수 있으므로 그 주기에 대해서 꼭 공부해야한다! 

 

예를들어..

• 컴포넌트가 렌더링 된 직후 setState를 하고 싶다면 어디다가 그 로직을 작성해야 할까요?
• 컴포넌트가 업데이트 된 직후 어떤 부분이 업데이트 되었는지 체크하고 싶다면 어디서 그 로직을 작성해야 할까요?

또 왔당

LifeCycle

 http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

 

Lifecycle 은 크게 3가지 부분이 있다.

• Mounting
• Updating
• Unmounting

그리고 각 부분마다 호출되는 다양한 API들이 있다. 이 API는 컴포넌트가 브라우저에서 나타날때, 사라질때, 업데이트될 때 호출되는 API이다. 중요하다고 한다!

---

Mounting : 컴포넌트 초기 생성, 리액트 코드 첫 렌더링의 시작

브라우저가 나타나기 전, 후에 호출되는 API

리액트코드가 HTML로 변환되어서 첫 렌더링이 되는 부분 즉, 리액트로 만들어진 웹 페이지에 접속했을 때 브라우저에 HTML이 나타나기까지의 과정!

 

constructor

컴포넌트 생성자 함수

리액트 컴포넌트 클래스를 만들어도, 클래스의 기본 특성은 생성자가 먼저 실행된다는 점!

 

render

렌더링을 위해 작성해둔 JSX를 return하는 메소드가 작동한다. 아직 브라우저에는 아무것도 없는 상태

 

componentWillMount

(사진에는 없는데... 어디 부분인걸까융?)

화면에 나타나기 직전에 호출되는 API (별로 신경안써도 된대)

주로 브라우저가 아닌 환경에서도 호출하는 용도로 사용했었는데, 이 API가 더 이상 필요하지 않게 되어 리액트 v16.3에서는 deprecated되었으니..!!!! ㅇㅎㅎ 그래서 사진에 없었구낭.. 옛날에 이런 API가 사용됐었구나~정도로 넘어가기~~

 

comonentDidMount

이제 컴포넌트가(리액트 코드가 HTML로 변환되어) 화면에 나타났다!

이제 document.getElementById를 통해서 DOM요소를 가져올 수 있는 단계가 되었다. componentDidMount는 딱 한번만 수행됨!(첫 렌더링 직후)

여기선 주로 D3, masonry처럼 DOM을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch등을 통해 ajax요청을 하거나 DOM의 속성을 읽거나 직접 변경하는 등 DOM에 HTML코드가 업데이트 된 직후 수행해야하는 작업을 진행한다.

 

* 리액트에서 document.get~~~ 과 같은 실제 DOM요소를 가져오는 메소드를 수행하는건 금지!! 리액트에서는 DOM관리를 굉장히 보수적으로 수행한다. 실제 DOM관리를 위해서 ref라는 도구를 제공하니 ref를 사용...하래란란ㄹㄴ...!!

---

Updating : 컴포넌트 업데이트, 리액트의 state나 props가 업데이트 되었을 때

컴포넌트가 가지고 있는 props나 state가 업데이트 되었을 때 수행되는 부분

props나 state가 업데이트 되는 것을 리액트는 어떻게 감지하고 또 업데이트 전,후에 어떠한 API가 호출될까나?

 

setState메소드

state를 업데이트 하려면 반드시 setState를 수행해야 한다. 리액트는 이 메소드가 수행되었을 대 컴포넌트를 업데이트한다!

 

shouldComponentUpdate

성능 upgrade, 컴포넌트를 최적화하는 작업에서 매우 유용하게 사용되는 API

리액트에서는 변화가 발생하는 부분만 업데이트를 해주기 때문에 성능이 좋다고 했다! 하지만, 변화가 발생한 부분만 감지해내기 위해서는 Virtual DOM에 한번 그려줘야한다.

즉, 현재 컴포넌트의 상태가 업데이트 되지 않아도 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들도 렌더링 된다.

"렌더링"된다는건, render()함수의 호출을 의미한다.

변화가 없다면 DOM조작은 하지 않고 Virtual DOM에만 렌더링하게된다. 이 작업은 그렇게 부하가 많은 작업은 아니지만... 컴포넌트가 무수히 많이 렌더링된다면 어쨌든 CPU자원을 사용하기 때문에 부담이 될 수도 있다. 이렇게 쓸데없이 낭비되는 CPU처리량을 줄여주기 위해 Virtual DOM에 리렌더링 하는것도, 불필요할 경우엔 방지하기 위해서 shouldComponentUpdatae를 작성한다.

이 함수는 기본적으로 true를 반환한다. 조건에 따라 false를 반환하면 해당 조건에서는 render함수를 호출하지 않는다.

 

render

state나 props, 즉 보여주어야 하는 데이터가 업데이트 되었으면 다시 render를 수행해야 한다.

 

componentDidUpdate

컴포넌트가 업데이트 되었을 때에 수행되는 메소드

이 시점에서는 this.props와 this.state가 바뀌어있다. 그리고 파라미터를 통해 이전의 값인 prevProps와 prevState를 조회할 수 있다. 현재 업데이트 된 props와 업데이트되기 전 prevProps, 업데이트 되기 전 prevState와 현재 업데이트 된 state를 비교해서 원하는 작업을 수행할 수 있다.

---

Unmounting : 컴포넌트 제거, 컴포넌트가 사라질 때

컴포넌트가 더 이상 필요하지 않게 되면 단 하나의 API가 호출된다.

만약 setInterval과 같은 작업을 진행했을 때 이 부분은 컴포넌트가 사라진다고 없어지지 않기 때문에 메모리에 남아있을 변수들을 여기서 null을 할당함으로 사용되지 않는 작업들을 해제한다.

 

componentWillUnmount

주로 등록했었던 이벤트를 제거

setInterval과 같은 작업을 했을 경우 여기서 해제하고, setTimeout을 걸은것이 있다면 clearTimeout을 통해 제거한다.

추가적으로 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose기능이 있다면 여기서 호출해주면 된다.

---

 

실습을...해보야아하는..ㄷㅔ...일단 넘ㅓ가보도롣거ㅣ허ㅏㄴㅁㄷ....ㅎㅎ..

하고싶을땐 여기를 들어가보도록 하자~

velopert.com/3631

 

 

 

 

 

 

 

 

 

 

 

출처

• medium.com/wasd/%EA%B8%B0%EC%B4%88%EB%B6%80%ED%84%B0-%EB%B0%B0%EC%9A%B0%EB%8A%94-react-part-6-5bb4b072621a
• velopert.com/3631