Side Effect (부수효과)

사전적 의미의 부수효과, Side Effect 부작용, 부과적으로 설명된 동작을 더 강조하기 위해 부작용.
프로그래밍 관점에선 값을 반환하는 것 외에 부수적으로 일으키는 효과(side effect)

let foo = 'hello'

function bar(){
    foo = 'world'
}
bar(); <-- bar는 Side Effect를 발생 시킵니다.

리액트에서 side effect

사이드 이팩트란 함수 내에서 동일한 입력에 대해 같은 결과를 보장할 수 없도록 하는 것이다.
함수 실행 과정에서 외부의 값을 변경하는 것이라고 이해할 수 있다.

• 서버에서 API 호출
• 함수 외부 값 변경
• 쿠키 및 브라우저 스토리지 이용
• 브라우저 직접 변경 (document,window 사용)
• 시간 관련 함수 사용 (setTimeOut, setInterval)

위의 것들은 반드시 필요한 존재
하지만! 일관되지 않은 결과를 반환하고 예측을 어렵게 하기 때문에
복잡도와 볼륨을 줄여 최대한 예측 가능한 코드를 작성해야한다.

useEffect

리액트는 side effect를 처리 하기 위해 useEffect라는 훅을 제공하고 있다.

의존성 배열(dependency array)에 따라 사이드이펙트를 발생시키기 때문에
렌더링 과정이 종료되면 실행될 수 있게 side effect를 분리한다.

렌더링 과정 중 리액트 로직에 의도치 않은 변경이 생긴다면 성능 문제와 오류를 발생!!

불순함수

순수하지 않은 함수는 동일한 입력이 주어지면 다른 시간에 다른 출력을 생성할 수 있는 함수

간단하게 이해하면,
동작 및 출력에 영향을 미치는 전역 변수 또는 기타 함수의 변경과 같은 외부 요인에 의존할 수 있다.

let counter = 0;

function increment() {
  counter++;
  return counter;
}

순수함수

순수 함수는 반환 값이 부작용 없이 인수에 의해서만 결정되는 함수

간단하게 이해하면,
동일한 입력에 대해 항상 동일한 출력을 생성하는 부작용이 없는 함수

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

리액트 사용시에 부수효과로 인한 문제점

• 함수가 외부 상태를 변경하면 상태 변화를 추적하기 어려워진다.
• 추적의 어려움은 결국 오류를 야기하고, 오류해결을 어렵게 만든다.

비용이 증가로 인한, 함수형 프로그래밍에서는 순수함수의 사용을 지향한다.

하지만, 리액트는 완전한 순수함수 그 자체로 구현할 수 없기 때문에,
일관되지 않은 결과를 반환하고 예측을 어렵게 하기 때문에
복잡도와 볼륨을 줄여 최대한 예측 가능한 코드를 작성해야한다.

참고자료