1. useEffect란?🧐

useEffect의 개념

useEffect는 React에서 제공하는 Hook으로, 외부 시스템을 통해 컴포넌트를 동기화할 수 있게 해준다.

2. useEffect 왜 쓰는 건데...?🤷

useEffect를 사용하는 이유

1. 너무 오래걸리는 함수의 경우 UI 렌더링을 블록킹 할 수 있다.
   => useEffect는 렌더링이 다 끝나고 읽기 시작하기 때문에 이런 문제를 보완해 줄 수 있다.

2. component 안에 바로 함수를 넣으면 리렌더링 될 때마다 매번 실행된다.

3. debugging 용도로도 사용 할 수 있다.

3. useEffect 어떻게 쓰는 건데...!!!😲

useEffect 사용 방법

1. useEffect를 import 하자!

import { useEffect } from 'react';

2. useEffect의 기본 형태

useEffect(() => {
  ... // 실행할 내용들
});

위와 같이 사용하면 모든 경우에 해당 useEffect 함수가 실행된다.

3. useEffect에 비어있는 defendency( [] ) 추가

useEffect(() => {
  ... // 실행할 내용들
}, []);

위의 경우는 컴포넌트가 처음으로 마운트되었을 때 실행된다. 이 경우에만 실행되고 다른 경우에는 실행되지 않기에 초기에 한 번 실행할 작업들이 필요할 때, 위와 같이 사용하면 된다.

4. defendency에 값 추가

let something = 2;

useEffect(() => {
  ... // 실행할 내용 
}, [something]);

useEffect에는 [] 안에 값이 들어가거나 들어가지 않는 경우가 있다. 이를 dependency 라고 부르는데 dependency 파라미터 값에 의존하여 useEffect 함수가 실행될지 말지를 결정한다.

위와같이 dependency값에 something이 들어가 있는 경우에는 해당 변수의 값이 변경될 때, useEffect 함수가 실행된다.

something이라는 값을 순차적으로 3, 4, 5로 총 세 번 변경하게 되면, 해당 useEffect함수는 3번 실행되게 된다.

5. cleanup 함수

useEffect(() => {
  ... // 실행할 내용
  
  return () => {
    ... // cleanup
  }
});

useEffect에는 해당 컴포넌트가 언마운트될 때 실행되는 cleanup 함수라는 기능이 있다. cleanup 함수는 컴포넌트가 사라질 때 호출되는 부분으로 메모리 누수를 방지하여 메모리 관리를 하거나 컴포넌트가 사라질 때, 수행할 작업들을 추가하기 위해 사용한다.

4. (번외)용어 정리

• Mounting : 컴포넌트가 최초로 나타낼 때를 뜻한다.
• Rendering : 컴포넌트가 마운트 된 후 컴포넌트가 호출 될 때를 뜻한다.
• UnMount : 컴포넌트가 사라질 때를 뜻한다.

쉽게 정리하면 컴포넌트가 처음 나타날 때를 마운트라 부르고 그 이후에 값이 변경되어 컴포넌트가 변경된 상태에서 나타날 때를 렌더링이라고 부른다.