[React] 순수 함수와 부수 효과

함수형 프로그래밍에서는 함수의 실행 결과를 예측가능하게 만드는 것이 중요하다.
결과를 예측 가능하다면 버그의 근본적인 원인인 개발자의 기대와 다르게 동작하는 상황을 방지(또는 디버깅)할 수 있다.

순수 함수와 부수 효과

순수 함수

• 자신의 일에 집중한다. 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않는다. (부수효과가 없음)
• 같은 입력이 주어졌다면 순수함수는 같은 결과를 반환해야 한다.

부수 효과

• 함수가 실행되는 동안 외부의 상태를 변경한다. (외부의 변수 변경, 네트워크 요청 등)
• 결과를 예측할 수 없게 만듬

순수 함수와 부수 효과를 분리하여 생각하는 것이 중요함!

리액트 컴포넌트는 순수해야 한다

• 부수효과는 Effect 함수와 이벤트 핸들링 함수에서 다뤄야 한다.

컴포넌트 함수 내부의 이벤트 핸들링 함수에서 부수효과를 다루는 이유

1. 컴포넌트가 렌더링될 때에는 이벤트 핸들링 함수가 실행되는 것이 아님.
2. 렌더링이 끝난 후에 사용자의 동작 등으로 인해 이벤트가 발생하면 그 때 이벤트 핸들링 함수가 실행됨.
3. 이벤트 발생 전에 핸들링 함수는 컴포넌트의 렌더링과 상관이 없으니 컴포넌트는 순수하다고 할 수 있다.

   컴포넌트는 결국 함수다!
   컴포넌트 함수의
   입력 : 매개변수(props),
   출력 : return()의 JSX
   즉, 컴포넌트 함수 내부에 이벤트 핸들링 함수가 존재하더라도, 컴포넌트 함수의 출력 값인 JSX 마크업 생성에 영향을 주지 않기 때문에, 같은 입력 -> 같은 출력 이라는 순수함수의 조건을 만족한다.
   + 컴포넌트 함수가 실행되는 동안(렌더링하는 동안) 외부의 상태를 변경하지 않는다는 조건도 만족함.
   (변경하는 것은 이벤트가 발생하여 핸들러 함수가 실행될 때)