[React] 🪄Side Effect, 🪄Effect Hook

▷ Side Effect

🪄Side Effect란?

Side Effect란 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우를 말한다.

// 전역 변수 foo를 bar라는 함수가 수정하는 예제이다.
let foo = 'hello';

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

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

❓React 컴포넌트에서의 Side Effect는?
✓ 타이머 사용(setTimeout)
✓ 데이터 가져오기(fetch API, localStorage)

🪄순수 함수(Pure Function)

순수함수란 입력으로 전달된 값을 수정하지 않고,
오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말한다.

순수 함수에는 네트워크 요청과 같은 Side Effect가 없다.
항상 똑같은 값이 리턴됨을 보장하기에 예측 가능한 함수이다.

Math.sqrt()는 순수 함수이다.
// 예측이 가능하기 때문

Math.random()는 순수 함수가 아니다.
// 예측이 불가능하기 때문
어떤 함수가 fetch API를 이용해 AJAX요청을 한다면 순수 함수가 아니다.
// 네트워크 상황, 서버 상태에 따라 응답 코드가 달라지기에 예측 불가능하기 때문

🪄React의 함수 컴포넌트

React의 함수 컴포넌트는 props가 입력으로,
그 어떤 Side Effect도 없으며 순수 함수로 작동한다.

AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은
React와 상관없는 API를 사용하는 경우 전부 Side Effect라고 여긴다.
그래서 React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.

▷ Effect Hook

🪄useEffect

useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 해주는 Hook이다.

useEffect의 첫 번째 인자 👉 함수(해당 함수 내에서 side effect를 실행하면 됨.)
useEffect의 두 번째 인자 👉 배열(조건을 담고 있음. 어떤 값의 변경이 일어날 때를 의미)

// 두 번째 인자 배열엔 어떤 값의 목록이 들어간다.(이 배열을 종속성 배열이라고 함)
// 배열 내의 어떤 값이 변할 때에만 함수가 실행된다.
useEffect(함수, [종속성1, 종속성2, ...])

❗️참고) 최상위에서만 Hook을 호출해야 하며, React함수 내에서 Hook을 호출해야 한다.
❗️참고) 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안 된다.

두 번째 인자가 없을 때, 빈 배열일 때, 값이 있을 때 예시

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

-----
useEffect(() => {
	console.log(몇 번 호출될까?)
}, [])
// 컴포넌트가 처음 생성될 때만 함수가 실행된다.
// 언제 필요? 대표적으로 처음 단 한 번, 외부 API를 통해 리소스를 받아오고 
// 더 이상 API 호출이 필요하지 않을 때에 사용할 수 있다.

-----

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

useEffect 사용 예제

// 이 컴포넌트에서 실행하는 Side effect는
// 브라우저 API를 이용하여 타이틀을 변경하는 것이다.
// 명언을 순서대로 보여주고, 그 순서에 맞게 타이틀을 변경한다.
import { useEffect, useState } from "react";

export default function App() {
  const proverbs = [
    "좌절감으로 배움을 늦추지 마라",
    "Stay hungry, Stay foolish",
    "Memento Mori",
    "Carpe diem",
    "배움에는 끝이 없다"
  ];
  const [idx, setIdx] = useState(0);

  const handleClick = () => {
    setIdx(idx === proverbs.length - 1 ? 0 : idx + 1);
  };

  return (
    <div className="App">
      <button onClick={handleClick}>명언 제조</button>
      <Proverb saying={proverbs[idx]} />
    </div>
  );
}

function Proverb({ saying }) {
  useEffect(() => {
    document.title = saying;
  });
  return (
    <div>
      <h3>오늘의 명언</h3>
      <div>{saying}</div>
    </div>
  );
}

👉 AJAX 사용법 보러가기
👉 (공식문서)Hook의 규칙 - Hook을 컴포넌트 최상위에서 호출해야하는 이유
👉 (공식문서)Hooks API Reference
👉 (공식문서)클래스형 컴포넌트 Class Components