useEffect와 마운트

useEffect 훅을 이용한 마운트 관리

- 마운트(처음 렌더링 되었을 때), 언마운트(사라질 때), 업데이트 되었을 때 특정 작업을 처리하기 위하여 사용한다.

 

useEffect 훅 생김새 : 첫번째 인자로 함수를 받고 두번째 인자로는 의존성 배열(deps)를 갖는다.

useEffect(() => {

   마운트 시 작업

   return 언마운트 시 작업

  }, [])

이 의존성 배열은 간단하게 설명하면 의존성 배열이 비워져 있으면 컴포넌트가 처음 렌더링 될때에만 useEffect 내부 함수가 동작하고 의존성 배열안에 있는 값이 늘어날 수록 안에 들어간 값이 바뀔 때마다 호출된다. deps 안에 특정 값이 있다면 언마운트 시, 값이 바뀌기 직전에도 호출된다.(console을 찍었을 때 잠깐 잠깐 값들이 undefined가 되거나 변하는 이유)

 

의존성 배열에 값이 많아질 수록 함수가 자주 호출되는 것이고 함수 내부에서 이루어지는 불필요하게 작업이 될 수 있어 많이 고민하고 작업해야 한다. 예전 프로젝트를 진행할 때 원하지 않을 때에 원하지 않는 작업이 이루어져서 이유를 찾아보니 불필요하게 원칙적으로 의존성 배열에서 사용되는 state 값들을 다 넣어놓았기 때문이었다.

여기서 반드시 알아야 할 점
1. 마운트 시 할 작업
- props로 받은 값을 컴포넌트의 로컬 상태로 설정
- 외부 API 요청(REST API 등)
- 라이브러리 사용
- setInterval을 통한 반복작업 혹은 setTimeout을 통한 작업 예약

2. 언마운트 시 할 작업(이게 제대로 이루어지지 않았을 때 렌더링되는 화면이 더럽다.)
- setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기(clearInterval, clearTimeout, removeEventlistner)
- 라이브러리 인스턴스 제거

3. useEffect 안에서 사용하는 State나 props가 있다면 deps에 넣어준다.(해당 값이 변할 때 작동하는 함수도 최신화 되어야 하기 때문이라고 이해했다.)

4. 상위 컴포넌트가 마운트되면 하위 컴포넌트들도 리렌더링된다.(불필요한 리렌더링은 최적화 필요)

 + 추가

컴포넌트 함수 내에서 이펙트를 제외한 모든 것들은 화면에 보여주기 위한 기능들을 정의함.
이 외에 작동하는 것들 http 요청이라던가 렌더링과 관련되지 않은 부분들을 사이드 이펙트라고 하고 이러한 사이드 이펙트들을 처리하기 위한 훅으로 useEffect를 사용함.
의존성 배열에 있는 값만이 useEffect의 사이드 이펙트 함수들을 실행시킴.

참고글 : [리액트] - LocalStorage와 useEffect   ※ useEffect가 어떻게 사용되는지 보고싶다면 읽어보는 것도

LocalStorage와 useEffect