[React] useEffect 총정리

React Hook인 useEffect에 대해서 정리해보겠습니다

---

📌 useEffect ?

• React Hooks 중 하나인 useEffect는 컴포넌트가 렌더링된 이후에 특정 작업을 실행할 수 있도록 하는 Hook이다.
• 왜 Effect라는 이름인가? 컴포넌트의 핵심 기능인 html 렌더링 이후에 동작하기 때문이다. 즉, 핵심 기능과 상관 없는 Side Effect(=함수의 핵심 기능과 상관 없는 부가기능)이라는 의미이다.

useEffect( () => {
  실행할 코드
}, [실행조건]);

→ 콜백 함수 안에 실행할 코드를 적고, 두 번째 파라미터로 배열 형태의 dependency를 넣을 수 있는데

dependency에는 변수나 state 같은 것들을 넣을 수 있다. 이는 실행조건이라고 보면 된다.

 

 

 

📌 Component's LifeCycle

: useEffect는 컴포넌트의 라이프사이클 중간 중간에 간섭하여 코드를 실행할 수 있다.

 

컴포넌트의 라이프사이클은 다음과 같다.

• mount : 컴포넌트가 생성됨
• update : 컴포넌트가 재렌더링됨 (업데이트됨)
• unmount : 컴포넌트가 삭제됨 (제거됨)

 

 

📌 useEffect 사용 예시

dependency가 없을 때

useEffect(() => {
  실행할 코드
});

→ 컴포넌트가 mount / update될 때마다 코드가 실행됨

• Vue의 updated와 동일한 기능
• 컴포넌트가 재렌더링될 때마다 코드를 실행하기 때문에 성능저하를 일으킬 수 있음 (비효율적)

 

dependency가 빈 값일 때

useEffect( () => {
  실행할 코드
}, []);

→ 컴포넌트가 mount될 때 코드가 실행됨

• Vue의 mounted와 동일한 기능
• 컴포넌트가 생성될 때, localStorage에 값을 셋팅하거나 api를 불러오는 등의 액션을 취할 수 있음

 

dependency에 조건(state)이 있을 때

useEffect( () => {
  실행할 코드
}, [state]);

→ 컴포넌트가 mount될 때 실행되고, 이후 해당 조건(state)이 변경될 때마다 코드가 실행됨

• Vue의 watch와 동일한 기능
• 사용자가 입력할 때마다 그 값(state)의 형식을 체크하는 등의 액션을 취할 수 있음

 

return 함수를 추가했을 때

useEffect( () => {
  return () => { 실행할 코드 }
}, []);

→ 컴포넌트가 unmount될 때 실행됨

• Vue의 unmounted와 동일한 기능

 

return 함수를 추가한 예시

useEffect( () => {
  실행할 코드 1
  return () => {
    실행할 코드 2
  }
}, []);

→ dependency가 빈 값일 때, mount시 '실행할 코드 1' 이 실행되고 unmount시 '실행할 코드2'가 실행됨

 

 

* clean up function

: dependency에 조건을 넣거나 / dependency가 없는 경우, useEffect 내의 함수가 실행되기 직전에 return 함수가 먼저 실행됨

새로운 effect(=useEffect 내의 함수)를 실행하기 전에 이전 effect(=return 함수)를 clean up 해주기 때문에

return 함수는 clean up function이라고 부른다. (* 여기엔 주로 타이머 제거나 ajax 요청 중단 등의 코드를 작성함) 

useEffect( () => {
  실행할 코드 1
  return () => {
    실행할 코드 2
  }
}, [state]);

→ dependency에 조건(state)이 있을 때, 컴포넌트가 mount될 때 '실행할 코드 1'가 실행된 후

조건(state)가 변할 때마다 '실행할 코드 2' → '실행할 코드 1' 순서로 실행됨

 

 

useEffect( () => {
  실행할 코드 1
  return () => {
    실행할 코드 2
  }
});

→ dependency에 조건(state)이 없을 때, 컴포넌트가 mount될 때 '실행할 코드 1'가 실행된 후

컴포넌트가 update될 때마다 '실행할 코드 2' → '실행할 코드 1' 순서로 실행됨