S2) Unit 9. [React] Effect Hook

📣  Side Effect(부수 효과)

✔️ 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 말한다.

✔️ 리액트에서는 컴포넌트 내에서 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작할 때 Side Effect가 발생했다고 말한다.

 

📣  Pure Function(순수 함수)

✔️ 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수

✔️ 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우 순수 함수라고 부를 수 없다.

✔️ 입력으로 전달된 값을 수정하지 않아야 한다.

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

upper('hello') // 'HELLO'

➰ 순수 함수에는 네트워크 요청과 같은 Side Effect가 없다.

➰ 어떤 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다 -> 예측 가능한 함수

 

📣  React의 함수 컴포넌트

✔️ AJAX 요청(fetch API)이 필요하거나, LocalStorage 또는 타이머(setTimeout)와 같은 React와 상관없는 API를 사용하는 경우 리액트 입장에서는 모두  Side Effect 이다.

✔️ 리액트에서는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.

 

📣  Effect Hook

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

✔️ useEffect(함수) : 인자로 받은 함수 내에서 Side effect를 실행하면 된다.

➰ 컴포넌트 생성 후 처음 화면에 렌더링

➰ 컴포넌트에 새로운 props가 전달되며 렌더링

➰ 컴포넌트에 상태(state)가 바뀌며 렌더링

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

 

🚨 Hook 사용 시 주의사항

➰ 최상위에서만 Hook을 호출한다.

➰ React 함수 내에서 Hook을 호출한다.

// 컴포넌트가 처음 생성되거나, props가 업데이트 되거나, state가 업데이트 될 때마다 실행
useEffect(() => {
	console.log(몇 번 호출될까요?)
})

// 컴포넌트가 처음 생성될 때만 함수가 실행
useEffect(() => {
	console.log(몇 번 호출될까요?)
},[])

// dep이 업데이트 될 때마다 실행
useEffect(() => {
	console.log(몇 번 호출될까요?)
},[dep])

 

📣  조건부 Effect 발생

✔️ useEffect의 두번째 인자는 배열

➰ 배열은 조건을 담고 있으며, 어떤 값의 변경이 일어날 때를 의미한다.

➰ 해당 배열에는 어떤 값이 들어간다 -> 종속성 배열이라고 부른다.

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

➰ 배열 내의 종속성1 또는 종속성2의 값이 변할 때, 첫번째 인자인 함수가 실행된다.

➰ 배열 내의 어떤 값이 변할 때만 함수가 실행된다.

➰ 빈 배열을 넣으면 처음 단 한번, 외부 API를 통해 리소스를 받아오고 더 이상 API 호출이 필요하지 않을 때에 사용할 수 있다.

 

📣  컴포넌트 내에서의 Ajax 요청

✔️ Data Fetching : 필터링

1️⃣ 컴포넌트 내에서 필터링 : 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법

import { useEffect, useState } from "react";
import "./styles.css";
import { getProverbs } from "./storageUtil";

export default function App() {
  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");

  useEffect(() => {
    console.log("언제 effect 함수가 불릴까요?");
    const result = getProverbs();	// 처음에만 불러오고
    setProverbs(result);
  }, []);	// 빈 배열이므로 처음에 데이터 불러올 때 한번만 실행된다.

  const handleChange = (e) => {
    setFilter(e.target.value);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} />
      <ul>
        {proverbs
          .filter((prvb) => {
            return prvb.toLowerCase().includes(filter.toLowerCase());
          })
          .map((prvb, i) => (
            <Proverb saying={prvb} key={i} />
          ))}
      </ul>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}

➰ 처음 한번만 외부 API에서 명언 목록을 받아오고, filter 함수를 이용한다.

 

2️⃣ 컴포넌트 외부에서 필터링 : 컴포넌트 외부로 API 요청을 할 때, 필터링 한 결과를 받아오는 방법(서버에 매번 검색어와 함께 요청하는 경우가 해당)

import { useEffect, useState } from "react";
import "./styles.css";
import { getProverbs } from "./storageUtil";

export default function App() {
  const [proverbs, setProverbs] = useState([]);
  const [filter, setFilter] = useState("");
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("언제 effect 함수가 불릴까요?");
    const result = getProverbs(filter);
    setProverbs(result);
  }, [filter]);	// filter가 바뀔 때마다 실행된다.

  const handleChange = (e) => {
    setFilter(e.target.value);
  };

  const handleCounterClick = () => {
    setCount(count + 1);
  };

  return (
    <div className="App">
      필터
      <input type="text" value={filter} onChange={handleChange} />
      <ul>
        {proverbs.map((prvb, i) => (
          <Proverb saying={prvb} key={i} />
        ))}
      </ul>
      <button onClick={handleCounterClick}>카운터 값: {count}</button>
    </div>
  );
}

function Proverb({ saying }) {
  return <li>{saying}</li>;
}

➰ 검색어가 바뀔 때마다 외부 API를 호출한다.

 

📣  장, 단점

	장점	단점
컴포넌트 내부	HTTP 요청 빈도 감소	브라우저(클라이언트)의 메모리 상에 많은 데이터를 갖게 되므로, 클라이언트의 부담이 늘어난다.
컴포넌트 외부	클라이언트가 필터링 구현 필요X	빈번한 HTTP 요청 서버가 필터링을 처리하므로 부담을 가져간다.

 

📣  Ajax 요청이 느릴 경우

✔️ 외부 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]);

➰ fetch 요청 전후로 setIsLoading을 설정해준다.