[React] 리액트 사이드 이펙트(Side-effect) 의미, 종류(feat. 순수함수)

# 리액트 Side-effect의 의미와 종류

사이드 이펙트(Side-effect)란 React 자체에서는 제공하지 않는 모든 것을 말한다.

 

예를 들어, 아래의 작업들은 Side-effect 이다.

 

• fetch() 메서드 등을 통해 HTTP 통신을 시도하는 것
• Local Storage 등에 데이터를 저장하는 것
• DOM을 직접 조작하는 것 : ex) document.querySelector('.클래스명').add EventListener(...)
• setTimeout, setInterval 등의 타이밍 함수를 사용하는 것

위의 작업들은 브라우저의 Web API 등을 사용하는 것으로, React 자체의 기능은 아니다.

 

React 입장에서는 자기가 제공하는 것 이외의 것(Side)으로 영향(Effect)을 미친다고 보기 때문에,

이런 것들을 모두 Side-Effect라고 부른다.

---

# 순수함수와 Side-Effect

Side-Effect는 말 자체는 Pure Function(순수 함수)과 대비되는 용어이다.

 

순수함수란 간략하게 말하면, "동일한 Input이 들어오면, output도 동일한 함수"를 의미한다.

function plus(a, b){
  return a + b;
}

즉, plus(1, 1)는 항상  2을 반환한다. (상황에 따라 3이나 4를 반환하지 않는다.)

이처럼 동일한 입력값에 대해 항상 동일한 값을 반환하는 함수를 순수함수라고 한다.

 

따라서 React 컴포넌트들은 일반적으로 순수 함수(Pure Function)이다.

동일한 Props(입력)이 들어오면, 그에 따라 동일한 JSX(출력)을 반환하기 때문이다.

export default function App() {
  // Props.name = Pizza를 입력하면,
  return <Food name="Pizza" />
}
  
function Food(props) {
  // 항상 Pizza를 반환
  return {props.name}; 
}

 

 

하지만 React 컴포넌트 내부에서 fetch(), setTimeout 등을 사용하면,

동일한 입력(Props)에 대해 다른 결과물(JSX)를 반환하게 될 수 있다.

 

이런 의미에서 Side-Effect는 순수함수와 대비되는 개념이다.

---

# useEffect 훅과 Side-effect

Side-Effect가 React 컴포넌트 내부에서 발생하면,

React 컴포넌트의 렌더링에 예상치 못한 영향(Side-Effect)을 미칠 수 있다.

 

이런 이유로 Side-effect는 컴포넌트 내부(body)에 직접적으로 사용하지 않고,

렌더링이 완료된 후 수행되는 useEffect에서 사용한다.

(Side-Effect를 컴포넌트의 렌더링과 별도로 분리 시키기 위함)

export default function App(){
  // Side-Effect는 컴포넌트 Body에서 사용X (렌더링에 영향 발생!)
  // localStorage.setItem("key", "data");

  // Side-Effect는 useEffect 훅에서 처리한다.
  useEffect(()=>{
    localStorage.setItem("key", "data");
  }, [])
  
  return <JSX />
}

 

즉, UseEffect은 리액트 컴포넌트의 렌더링에 영향을 미치지 않으면서

리액트 외부의 것들(side-effect : fetch, DOM, localStorage, setTimeout 등)을 사용할 때 사용되는 훅이다.