[React] Effect Hook

✅ TIL

• Side effect

• pure function

• useEffect
  종속성 배열 dependency array
  useEffect를 통한 AJAX 요청

• 로딩 화면의 필요성

---

1️⃣ Side Effect

: 부수 효과

함수 내부의 구현이 함수 외부에 영향을 끼치는 경우 = 해당 함수에 side effect가 있다고 한다.
React에서는 fetch를 사용해 API 정보를 가져오거나 DOM을 직접 조작할 때 side effect가 발생했다고 한다.

Pure Function (순수 함수)

함수의 입력만이 함수의 결과에 영향을 주는 함수

입력으로 전달된 값을 수정하지 않는다. (immutable)
동일한 전달인자에 항상 동일한 값이 리턴됨을 보장한다. (예측 가능한 함수)

Math.random()은 return이 매번 달라지므로 pure function이 아니다.
fetch API를 이용해 AJAX 요청하는 함수는 서버의 데이터에 Side Effect를 일으킬 수 있으므로 pure function이 아니다.

React 컴포넌트에서의 Side Effect

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

---> Side Effect를 다루기 위한 Hook 사용

---

2️⃣ Effect Hook

useEffect

컴포넌트 내에서 side effect를 실행할 수 있게 하는 Hook

useEffect(함수) //기본형

Hook의 규칙

• 최상위에서만 Hook을 호출한다.
  반복문, 조건문 혹은 중첩된 함수 내에서 X
  최상위 레벨에서 호출할 때만 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 걸 보장한다.

• React 함수 내에서만 Hook을 호출한다.
  자바스크립트 함수 X

공식문서

Render -> Effect Hook 실행

컴포넌트가 렌더링 되면 Effect Hook이 실행된다.

1. 컴포넌트 생성 후 처음 화면에 렌더링
2. 컴포넌트에 props가 전달되며 렌더링
3. 컴포넌트에 state가 바뀌며 렌더링

---

3️⃣ Effect Hook 조건부 실행

조건부 effect 발생

종속성 배열 (dependency array)

useEffect(함수, [종속성1, 종속성2...])

: useEffect의 두번째 인자 [deps]
함수가 실행되는 조건을 나타내지만 표현식이 아닌 value로 할당한다.
종속성 배열 요소의 값이 변할 때 함수가 실행된다.

빈 배열일 경우

useEffect(함수, [])

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

ex. 외부 API를 통해 리소스를 받아오고 더 이상 호출이 필요하지 않을 때

종속성이 없을 경우 (기본형)

useEffect(함수)

컴포넌트 최초 생성 때와 props, state가 업데이트 될 때 함수가 실행된다.

---

4️⃣ 컴포넌트 내에서의 AJAX 요청

목록 내 필터링을 구현할 때

1. 컴포넌트 내에서 필터링 (CSR)
   : 외부 API에서 데이터를 최초 1회 받아오고, filter 함수를 사용한다.
   HTTP 요청의 빈도를 줄일 수 있다.
   클라이언트의 메모리 상에 많은 데이터를 갖게 된다.

2. 컴포넌트 외부에서 필터링 (SSR)
   : 검색어가 바뀔 때마다 외부 API를 호출한다.
   HTTP 요청 빈도가 늘어난다.
   서버가 필터링을 처리하므로 서버가 부담을 가져간다.

useEffect AJAX fetch API 사용하기

외부 API를 받아오는 과정에서 side effect를 최소화하기 위해 effect hook을 사용한다.
Hook을 사용하지 않고 네트워크 요청을 하면, 페이지가 멈추거나 깜빡일 수 있다.

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

종속성 filter가 변경될 때마다 외부 API를 받아온다.

외부 API 접속이 느릴 경우 로딩 화면 구현은 필수다.

로딩 화면 (loading indicator)

useState로 로딩의 상태 처리가 필요하다.
fetch 요청 전후로 로딩 상태 변경 함수(true / false)를 설정해주어 보다 나은 UX를 구현한다.

---

Learn more...

useEffect

• 첫 번째 인자 함수의 return문에는 cleanup 함수를 넣을 수 있다.
  cleanup 함수는 말 그대로 뒷정리를 해준다.

• 두 번째 인자 deps가 빈 배열일 경우, 컴포넌트가 최초 생성 될 때만 함수가 호출된다.
  deps가 빈 배열일 경우 컴포넌트가 사라질 때 cleanup 함수가 실행된다.

• useEffect 내부에서 사용하는 state와 props를 deps 배열에 넣는다.
  요소가 업데이트 될 때마다 함수가 호출된다.

• deps parameter를 생략하면 컴포넌트가 리렌더링 될 때마다 함수가 호출된다.