Side Effect

Side Effect (부수 효과)

• 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기합니다.

Pure Function (순수 함수)

• 순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 의미합니다. 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없습니다.

function upper(str) {
  return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable)
}

upper('hello') // 'HELLO'

• 순수 함수에는 네트워크 요청과 같은 Side Effect가 없습니다

• 그래서 예측 가능한 함수이기도 합니다.

• Q) Math.random()은 순수 함수가 아닙니다. 왜일까요?

  • Math.random은 어떤 결과값이 나올지 예측이 불가능하기 때문에 순수 함수가 아니다.

• Q) 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해봅시다. 이 함수는 순수 함수가 아닙니다. 왜일까요?

  • 네트워크 상황, 서버상태에 따라 응답코드가 달라지기 때문에 예측이 불가능하다.

React의 함수 컴포넌트

• 우리가 앞서 배운 React의 함수 컴포넌트는, props가 입력으로, JSX Element가 출력으로 나갑니다. 여기에는 그 어떤 Side Effect도 없으며, 순수 함수로 작동합니다.

React 컴포넌트에서의 Side Effect

• 타이머 사용 (setTimeout)
• 데이터 가져오기 (fetch API, localStorage) AJAX 요청이 필요하거나, LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있습니다.

  출처: 코드스테이츠