[React] 순수 함수

순수 함수란

React에서 순수함수란 컴포넌트의 렌터링 과정에서 자주 언급되는 개념이다. 일반적으로 React는 순수 함수로 작성되는 것이 권장된다.

 

순수 함수의 정의

순수 함수는 아래의 두가지 속성을 포함한 함수이다.

1. 부수 효과가 없다 - 외부의 상태를 변경하지 않는다. 함수 내부에서 전역 변수를 변경하거나, DOM을 조작하거나, 네트워크 요청을 보내는 등의 동작을 하지 않는다. 즉, 주어진 입력 값만을 가지고 처리하며, 함수 외부에 영향을 미치지 않는다.
2. 같은 입력에 대해 항상 같은 출력을 반환한다. - 동일한 인풋이 주어졌을때 항상 동일한 결과를 반환한다. 외부의 상태나 입력값 이외의 어떤 것도 결과에 영항을 미치지 않는다.

 

순수 함수 예시

// 순수 함수의 예시
function add(a, b) {
  return a + b;
}

두 개의 숫자를 입력 받아 그 합을 반환한다. 같은 입력에 대해 항상 같은 출력을 반환하며, 함수 외부에 어떠한 영향을 미치지 않는다.

 

반면, 아래와 같은 함수는 순수 함수가 아니다. 외부 변수 'counter' 에 영향을 주기 때문에 부수 효과가 발생하며, 동일한 입력에 대해 항상 같은 출력을 반환하지 않는다.

let counter = 0;

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