사이드 이펙트

1. 사이드 이펙트 경우

첫 번째, 함수를 만든 목적, 기대하는 결과가 나오지 않은 것!

function add(x) { return x + 4 }

add(10)
// 14

add('10')
// "104"

두 번째, 함수가 하나의 일을 하지 않고 다른 일도 같이 하는 것

아래 함수의 목적은 x + 4를 더하는 것인데 다른 문자값이 같이 나온다. 이것이 사이드 이펙트의 경우 중 하나.

function add(x) { 
  window.setTimeout(() => {
    console.log('나는 지금 부작용을 저지르고 있다!!!!')
    const y = x * x
    return y
  }, 2003)
  return x + 4 
}

add(93) 
// 97
// 나는 지금 부작용을 저지르고 있다!!!!

2. 정리

리액트의 함수형 컴포넌트 리액트 요소를 반환하는 하나의 기능을 하는 순수 함수이다. 하지만 훅이 등장하면서 함수형 컴포넌트 안에서 상태를 생성하고, 실제 DOM을 제어하는 등의 기능을 하면서 부터 함수는 순수하지 않아진다. 그래서 나온 것이 useEffect()이다. 순수하지 않거나 변형, 구독, 타이머, 로깅 또는 다른 부작용(side effects)을 일으키는 것은 useEffect에서 관리하게 한다.