🫧 Pure Function (순수 함수)

: 오직 함수의 입력(매개변수)만이 함수의 결과에 영향을 주는 함수

• 다시 말하면, 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수가 아니다.
• 또한 순수함수는 입력으로 전달된 값을 수정하지 않는다.

function upper(str) {
  return str.toUpperCase(); // (immutable)
};

upper('hello'); // HELLO
// toUpperCase 메소드는 원본을 수정하지 않기 떄문에 함수 upper()은 순수함수이다.

• 순수 함수에는 네트워크 요청과 같은 Side Effect가 없다.
• 순수 함수는 전달 인자에 대해 항상 예측 가능한 동일한 리턴값을 출력한다.

---

⚡️ Side Effect (부수 효과)

: 함수 내에서의 어떤 구현이 함수 외부에 영향을 끼치는 경우, 해당 함수는 Side Effect가 있다고 한다.
(함수의 실행이 예상치 못한 영향을 끼칠 수 있다는 뜻)

let greeting = 'Hello!';

function func() {
  greeting = 'Bye..';
};

func(); 
// 함수 func()은 함수 외부의 변수 greeting을 변경시켰다. -> Side Effect!

⚡️ React에서의 Side Effect

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

React의 함수 컴포넌트

props를 입력으로 받고, JSX 엘리먼트를 리턴하는 함수 컴포넌트는 그 어떤 Side Effect도 없으며, 순수 함수로 작동한다.

// 함수의 입력(props)만이 함수의 결과에 영향을 준다.
function Tweet({ writer, content, createdAt }) {
  return <div>
    <div>{writer}</div>  
    <div>{createdAt}</div>
    <div>{body}</div>
  </div>
};

하지만 보통 React 애플리케이션을 만들 때는, AJAX 요청이 필요하거나, LocalStroage 또는 타이머와 같은 API를 사용하는 경우가 발생할 수 있다.

➡️ 이는 React의 입장에서 전부 ⚡️Side Effect이다.
(네트워크 요청으로 인해 서버의 데이터에 Side Effect를 일으킬 수 있기 때문)

React 컴포넌트에서의 Side Effect

• 타이머 사용 (setTimeout)
• 데이터 가져오기 / 네트워크 요청 (fetchAPI, localStorage)

따라서, React에서는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.

---

Effect Hook

: Effect Hook을 사용하면, 함수 컴포넌트 내에서 Side Effect를 실행할 수 있다.

Effect Hook을 이용하기 위해서는 React에서 useEffect를 불러와야 한다.

import { useEffect } from "react";

Effect Hook 사용하기

useEffect()

useEffect(함수, [종속성, 종속성2, ...]) : 첫 번째 인자로 함수, 두 번째 인자로 종속성 배열(dependency array)을 갖는다.

1. 함수

useEffect()의 첫 번째 인자는 함수로, 이 함수 안에서 Side Effect를 실행하면 된다.

useEffect(() => {
  // 여기서 Effect를 실행하면 된다.
}, deps);

2. 종속성 배열(dependency array)

useEffect()의 두 번째 인자는 종속성 배열로, 값을 넣거나 생략할 수 있다.

• 종속성 배열은 Effect Hook의 첫 번째 인자인 함수가 실행되는 조건을 담고 있다.

1) 아무 것도 넣지 않을 경우 (생략할 경우)

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

deps 파라미터를 생략하는 경우, useEffect()는 컴포넌트가 리렌더링될 때마다 호출된다.

• 컴포넌트가 처음 생성되어 화면에 렌더링될 때
• 컴포넌트에 props가 업데이트되어 렌더링될 때
• 컴포넌트의 상태(state)가 업데이트되어 렌더링될 때

2) 빈 배열 []을 넣을 경우

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

컴포넌트가 처음 생성되어 화면에 렌더링될 때만 호출된다.
ex) 처음 단 한 번만 외부 API를 통해 리소스를 받아오고, 더 이상 API 호출이 필요하지 않은 경우

3) 특정 값을 넣을 경우

useEffect(() => {
// ...
}, [filter]); // filter 값이 바뀔 때마다 실행된다.

특정 값이 업데이트될 때마다 실행된다.