Effect Hook란?

• React 함수형 컴포넌트에서 side effect를 처리하기 위해 사용되는 특별한 Hook

Side effect(부수 효과)란?

• 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 Side effect라고 한다.
• 컴포넌트의 순수함수 특징에 위배된다.

다음과 같은 코드가 있다.

let str = '외부입니다.';

function func() {
	str = '내부에서 외부를 바꿔버린다.'
}

func(); // 해당 함수는 Side Effect가 발생한다.

해당 코드는 func함수 내부에서 외부의 str 변수를 바꿔버리는 Side Effect가 발생한다.

Side effect의 문제점

• 실행 흐름을 예측하기 어렵게 만든다.
• 가독성과 유지보수의 어려움
• 재사용성 저하

👉 위와 같은 문제를 Effect Hook으로 해결할 수 있다.

uesEffect

• 컴포넌트의 사이드 이펙트를 처리하기 위한 Hook

기본 형태는 다음과 같다.

useEffect(() => {}, [종속성1, 종속성2, ...]);

1. useEffect의 첫 번째 인자는 함수다.

• 해당 함수 내에서 side effect를 실행한다.
• 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행된다.

2. useEffect의 두 번째 인자는 종속성이다.

• 배열 내의 종속성 값이 변할 때에만, (effect가 발생하는) 함수가 실행된다.

uesEffect의 형태

1. useEffect(() => {}, [종속성1, 종속성2, ...]);

• 처음 컴포넌트가 렌더링 된 후 종속성의 값이 변경될 때 마다 함수가 실행된다.

2. useEffect(() => {}, []);

• 처음 컴포넌트가 렌더링 된 후 한 번 실행된다.

3. useEffect(() => {});

• 처음 컴포넌트가 렌더링 된 후 props나 state 값이 변경될 때 실행된다.

👉 아래와 같은 순서로 실행된다.

---

Data Fetching: 필터링

1. 컴포넌트 내부에서 필터링

• 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법
• 장점 : HTTP 요청의 빈도를 감소시킨다.
• 단점 : 브라우저(클라이언트)가 많은 데이터를 갖게 되므로, 클라이언트의 부담이 늘어난다.

2. 컴포넌트 외부에서 필터링

• 컴포넌트 외부로 API 요청을 할 때, 필터링한 결과를 받아오는 방법 (서버에 매번 검색어와 함께 요청하는 경우)
• 장점 : 클라이언트가 필터링 구현을 하지 않아도 된다.
• 단점 : 빈번한 HTTP 요청을 서버가 처리하므로 서버에 부담이 간다.

AJAX 요청 예시

useEffect(() => {
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
    });
}, [filter]);

로딩 화면

• 외부 API 접속이 느릴 경우에 뜨는 화면

const [isLoading, setIsLoading] = useState(true);
>
// LoadingIndicator 컴포넌트를 별도로 구현했다고 가정
return {isLoading ? <LoadingIndicator /> : <div>로딩 완료 화면</div>}

useEffect(() => {
  setIsLoading(true); // 로딩화면을 띄운다.
  fetch(`http://서버주소/proverbs?q=${filter}`)
    .then(resp => resp.json())
    .then(result => {
      setProverbs(result);
      setIsLoading(false);// 로딩화면을 내린다.
    });
}, [filter]);