Effect Hook

서재홍·2022년 8월 23일

학습 목표

Side effect가 어떤 의미인지 알 수 있다.
React 컴포넌트를 만들 때 side effect로부터 분리해서 생각할 수 있다. (비즈니스 로직과 표현 영역 구분)
- Side effect의 예를 들 수 있다.
Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리할 수 있다.
Effect Hook에서의 dependency array 사용법을 이해할 수 있다.
컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI를 만드는 법을 이해할 수 있다.

Side Effect(부수 효과)

함수 내에서 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 합니다.
ex) React에서는 컴포넌트내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effec가 발생했다고 합니다.

let foo = 'hello';

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

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

Pure Function(순수 함수)

오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 순수 함수라고 합니다. 또한 순수 함수는, 입력으로 전달된 값을 수정하지 않습니다.
Side Effect가 없고 어떠한 전달 인자가 주어질 경우 항상 똑같은 값이 리턴되기 떄문에 예측이 가능한 함수입니다.

function upper(str) {
  return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable)
}

upper('hello') // 'HELLO'

React의 함수 컴포넌트

React의 함수 컴포넌트는, props가 입력으로, JSX Element가 출력으로 나갑니다.
여기에는 그 어떤 Side Effect도 없으며, 순수 함수로 작동합니다.

function SingleTweet({ writer, body, createdAt }) {
  return <div>
    <div>{writer}</div>
    <div>{createdAt}</div>
    <div>{body}</div>
  </div>
}

React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공합니다.

React 컴포넌트에서의 Side Effect

타이머 사용 (setTimeout)
데이터 가져오기 (fetch API, localStorage)

useEffect()

React 에서 useEffect는 컴포넌트 내에서 side effect (fetch, setTimeout, LocalStorage 등) 를 실행할 수 있게 하는 Hook 이다.
이 컴포넌트에서 실행하는 Side effect는 브라우저 API를 이용하여, 타이틀을 변경하는 것입니다.

컴포넌트 생성 후 처음 화면에 렌더링(표시)
컴포넌트에 새로운 props가 전달되며 렌더링
컴포넌트에 상태(state)가 바뀌며 렌더링

이와 같이 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행됩니다.

Hook을 쓸 때 주의할 점

최상위에서만 Hook을 호출합니다.
React 함수 내에서 Hook을 호출합니다.

useEffect(function [, depencency 1, depencency 2, ...])

Parameters 설명:

실행할 함수: function 인자에 annonymous function 을 넣고 그 안에 실행할 side effect 를 적어주면 된다.
종속될 요소 배열: 종속성 배열 내의 값이 변경이 일어날 때만 useEffect 의 실행할 함수가 호출되게 만들 수 있다. 그래서 배열 안에는 변화가 일어나는 state 변수들을 넣어준다.

종속될 요소 배열 인자	useEffect() callback 작동
없음	매번 자신이 위치한 컴포넌트가 렌더링 될 때 실행
빈 배열 ([ ])	컴포넌트 최초 생성 시에만 한번 실행되고 다시 실행되지 않음
배열	종속성 배열 내의 값이 변경이 일어날 때만 실행

컴포넌트 내에서 Ajax 요청

서버 요청(fetch)은 side effect 를 일으키는 동작이기 때문에, React component 에서 AJAX 요청을 하려면 useEffect() 안에 fetch 를 쓴다.

목록 내 필터링을 구현하기 위해서는 다음과 같은 두 가지 접근이 있을 수 있습니다.

컴포넌트 내에서 필터링: 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법
컴포넌트 외부에서 필터링: 컴포넌트 외부로 API 요청을 할 때, 필터링 한 결과를 받아오는 방법 (서버에 매번 검색어와 함께 요청하는 경우)

두 방식의 차이점

	장점	단점
컴포넌트 내부에서 처리	HTTP 요청의 빈도를 줄일 수 있다.	브라우저의 메모리 상에 많은 데이터를 갖게 되므로 클라이언트의 부담이 늘어난다.
컴포넌트 외부에서 처리	클라이언트의 부담이 줄어든다.	HTTP 요청이 늘어나며, 서버의 부담이 늘어난다.