리액트 훅, React - Hook (2) - LifeCycle (생명주기

1. LifeCycle (생명 주기)

---

리액트는 컴포넌트를 기반으로 하여 수명 주기가 존재한다. 앱 전반에 걸쳐 우리의 눈에 페이지가 보이는 순간부터 페이지가 사라질 때 까지의 생명주기를 관리하는 방법을 공부해보았다.

 

 

 

1) 리액트의 라이프 사이클

 

크게 3 가지로 분류할 수 있다.

 

 

- Mount

 

컴포넌트가 처음 탄생하는 순간이다. 

마운트 되었다는 것은 처음 렌더링 되었다는 것을 말한다.

 

 

- Update

 

컴포넌트가 리렌더링 되는 순간이다.

 

 

- unMount

 

컴포넌트가 화면에서 사라지는 순간이다.

 

 

 

2) 라이프 사이클 제어

 

각 라이프 사이클 별로 컴포넌트가 다른 행동을 하도록 제어하는 것을 말한다.

 

useEffect를 이용하여 제어할 수 있다.

 

 

 

 

 

2. useEffect

---

 

리액트 컴포넌트의 사이드 이펙트를 제어하는 리액트 훅

 

 

 

 

1) 사이드 이펙트

 

부수적, 파생되는 효과

컴포넌트가 어떠한 행동을 했을 경우 발생하게되는 효과

 

ex) 값 변경

 

 

- 선언 방식

 

콜백 함수이며, 배열로 선언해야 한다.

(배열 값이 바뀌는 경우 콜백 함수에 해당하는 사이드 이펙트 실행, 해당 배열에 의존하므로 의존성 배열이라고도 함(deps)

 

여러 값을 배열에 넣을 수 있다.

 

 

 

3. LifeCycle + useEffect 제어

---

1) Mount 제어

 

빈 배열로 남겨둘 경우 처음 한 번만 실행되도록 조작할 수 있다. (생성된 배열 값이 바뀌어야 실행이 되지만, 조작할 state값이 배열에 없으므로 배열은 계속 같은 값을 유지, 처음 1번만 실행되고 이후에는 실행되지 않는다.)

 

 

 

2) Update 제어

 

두 번째 인수(배열)를 생략하면, 마운트 시 1번만 실행되고 컴포넌트가 업데이트 될 때마다 실행된다.

 

 

이를 응용하여 첫 마운트를 제외하고 정말 업데이트 시에만 제어하고 싶다면 useRef로 Mount 여부를 제어하는 변수를 만들어 조건을 걸어주면 된다.

이 방법을 사용하면 useEffect는 처음 실행될 때에도 실행되므로, 그 과정을 제거해주어 정말 업데이트 기능만 사용할 수 있다.

 

 

 

3) unMount 제어

 

 

useEffec는 해당 컴포넌트가 처음 마운트 될 때 실행되어, 끝날 때 return 하므로, 안쪽에 함수를 하나 만들어 리턴시켜주면 그 시점이 끝나는 시점이다. (이러한 함수를 클린 업 이라고 한다.)

 

메모리를 해제해주는 최적화 작업에 주로 사용한다.