useEffect hook

 

 

useEffect란?
React의 함수형 컴포넌트에서 부수효과(side effects)를 다루기 위한 hook이다

부수효과(side effects): 컴포넌트의 렌더링과는 직접적으로 관련이 없는작업(네트워크 요청,DOM 조작 등)

useEffect 왜 사용해야 할까?

React의 함수형 컴포넌트에서는 일부 구성요소가 외부 시스템과의 동기화가 필요할 수 있다. 예를들자면 네트워크요청, DOM조작, 구독설정, 타이머 설정들등 컴포넌트의 렌더링과 직접적인 관련이 없는 경우에 사용한다. 

useEffect 구문

• useEffect(callback,[dependencies])
  • callback: 부수효과를 수행하는 함수로, 컴포넌트 렌더링 후에 비동기적으로 실행된다. 필요에 따라 Clean-up함수를 반환할 수 있다.
  • dependencies: 의존성 배열로, 배열에 포함된 값에따라 useEffect의 동작 방식이 틀려진다.
    • [빈배열]: 컴포넌트가 초기에(마운트될)에 한번 실행되고, Clean-up은 언마운트시에 실행된다.
    • [의존성값]: 컴포넌트가 초기(마운트)에 한번 실행되고, 업데이트 될때마다 실행되며, Clean-up은 의존성 배열의 값이 업데이트 되고 다음 리렌더링시의 useEffect가 실행되기전에 이전 렌더링의 Effect를 정리한다(Clean-up이 실행된이후에는 useEffect 내부코드를 실행한다.)
    • [생략]: 컴포넌트가 매 렌더링(마운트,언마운트,업데이트 )시에 실행되며 Clean-up은 다음 리렌더링시의 useEffect의 실행되기전에 이전 렌더링의 Effect를 정리한다.(Clean-up이 실행된이후에는 useEffect 내부코드를 실행한다.)

useEffect의 동작방식

• 마운트(Mount): 컴포넌트의 렌더링이 완료된후, 의존성 배열과 상관없이 callback함수의 코드가 비동기적으로 실행된다.
• 언마운트(Unmount): 컴포넌트가 화면에서 사라질때, Clean-up함수가 실행된다.
• 업데이트(Update): 컴포넌트가 업데이트 될때, 의존성 배열에따라 Callback함수와 Clean-up함수가 실행된다.

useEffect 사용법

- 의존성 배열에 따른 동작

의존성 배열에 따른 동작을 구현해놨다. 각 의존성 배열에서 테스트를 하면서 useEffect의 동작 방식을 완전히 이해 할수 있다.

(실행순서는 주석으로 작성 해놓았다.) -> 예제가 너무 지저분해져서 지웠다.
(https://stackblitz.com/edit/stackblitz-starters-vqttru?file=src%2FApp.tsx)

 

- 의존성 배열에 따른 Clean-up함수의 상태

useState의 setState는 클로저의 개념을 가지고있다. 하지만 useRef를 테스트하다보니 useEffect의 Clean-up함수도 클로저의 개념을 가지고 있는것을 확인했다. ExampleComponent함수에서는 언마운트시에 counter의 값을 반환하고있는데  counter값을 증가시킨후에 언마운트 시켜도 초기값을 되돌려주고 있다. useEffect의 의존성 배열을 빈배열[]을 설정해주어서 그런것이다. 빈배열[]은 초기 렌더링이후에 실행시키지 않는속성이다. 초기렌더링이후 useEffect가 실행되고 useEffect안에서 state를 변경시켜도 Clean-up함수는 빈배열[] 로인해서 마운트되었을시의 환경을 기억하기때문에 counter의 초기값을 되돌려준다. 반환시에 counter의 현재상태를 반환하려면 useEffect의 종속성으로 counter를 설정해주어 Clean-up함수가 counter의 상태를 알수있도록 해주어야한다.

https://stackblitz.com/edit/stackblitz-starters-cqsasb?file=src%2FApp.tsx

useEffect 주의할점

- 최상위 레벨 호출: useEffect 를 호출하려면 구성요소의 최상위 수준에서 호출해야한다.

- 호출의 위치: useEffect를 호출할때는 조건문이나 반복문안에서 hook을 호출할 수 없다.

- Custom Hook: 일반함수가 아닌 use접두사가 붙은 자체훅에서 사용할수 있다.

- 단순한데이터 변화: 렌더링을 위해 데이터를 변환할때는 필요하지 않다.

- 이벤트: 사용자 이벤트를 처리하기 위해서는 필요하지 않다.

- SSR: 서버렌더링 중에는 실행되지 않으며, 클라이언트에서만 실행된다.

- 렌더링: 컴포넌트의 렌더링이 끝나후에 실행된다.

- 무한루프: 컴포넌트 내에서 정의된 객체나 함수인경우, 렌더링이 계속 일어날수 있다.

- 의존성 배열의 얕은복사: useEffect의 의존성 배열은 얕은복사를 진행한다. 원시타입은 문제가 없지만 참조타입의 경우에는 얕은복사를 통해 변화를 감지하며, object의 참조주소가 변경되었는지를 판단한다.

- 클로져: Clean-up함수 또한 클로저의 개념을 가지고 있다. 생성 당시의 환경은 의존성 배열로 상태로 설정된다.

 

 

useEffect 의 참고문서

useEffect – React

 

Clean-up

Synchronizing with Effects – React