useEffect 특징

useEffect

useEffect는 sideEffect를 다루는 훅이다.

함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다.

다음은 전역변수 foo를 bar라는 함수가 수정하는 예제이다.

let foo = 'hello';

function bar() {
  foo = 'world';
}

bar(); // bar는 Side Effect를 발생시킵니다!

보통 리액트를 통해 애플리케이션을 제작할 때, AJAX 요청이 필요하거나, Local Storage 또는 타이머 같은 리액트와 상관없는 API를 다루는 상황이 온다. 이는 리액트 입장에서 전부 Side Effect 이다.

 

리액트는 Side Effect를 다루기 위해 Effect Hook을 제공한다.

useEffect 실행 시점

useEffect는 렌더링이 완료된 이후 실행되는 훅이다. 

Side Effect는 다른 컴포넌트에 영향을 줄 수 있기 때문에 렌더링 과정이 아닌, 렌더링 이후에 작동시키는 것이 바람직하다.

 

useEffect를 통해 sideEffect를 렌더링 이후에 실행시킬 수 있게 된다.

의존성 배열을 이용한 조건부 effect 발생

useEffect의 두 번째 인자는 배열이다. 배열은 조건을 뜻한다.

 

어떤 값의 변경이 일어날 때, 콜백을 실행한다.

 

useEffect(콜백함수,[어떤값])

 

useEffect 실행은 3가지 케이스로 분류할 수 있다.

의존성 배열, 즉 '어떤 값'이 1) 빈배열일때, 2) 무언가 있을 때, 3) 의존성배열을 할당하지 않았을 때  로 나눌 수 있다.

 

1. 빈배열일때

useEffect(콜백,[])

컴포넌트가 처음 생성될때만 effect함수가 실행된다.

처음 단 한 번, 외부 API를 통해 리소스를 받아오고 더이상 API 호출이 필요하지 않을 때에 사용할 수 있다.

 

2. 무언가 있을 때

useEffect(콜백,[state])

state가 바뀔때마다 콜백이 실행된다.

 

3. 의존성배열을 할당하지 않았을 때

useEffect(콜백)

매 번 새롭게 컴포넌트가 렌더링될 때 콜백이 실행된다.

Clean-up 함수

Clean-up함수를 통해서 언마운트시(페이지 전환시) 실행할 기능을 작성해 줄 수 있다.

뒷정리 함수로써 컴포넌트가 사라질때(언마운트시) 포함하여 모든 리렌더링 시에 실행되어 effect 정리를 한다.

https://ko.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update

 

useEffect(()=>{
	return () => {여기 적힌 기능이 실행된다.}
    }

---

참고 :

코드스테이츠 urclass

https://wildcard.tistory.com/entry/6-React-Hook