Side Effect
함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 얘기한다. 부작용이 있는 함수라고도 한다.
React에서는 컴포넌트 내에서 fetch 를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 Side Effect가 발생했다
얘기할 수 있다. Side Effect가 있는 함수예제 코드다
function add(a, b){
return a + b;
}
console.log(add(2,3)) // 5
console.log(add(5,7)) // 12위 함수는 두개의 인자를 받아 합계를 반환하는 코드이며 이 함수는 동일한 인자에 대해 항상 동일한 결과를 반환하며, 외부 상태를 변경하지
않는다. 따라서 순수 함수로 간주된다. 순수 함수의 특징은 다음과 같다
- 동일한 인자에 대해 항상 동일한 결과를 반환한다.
- 함수 내부에서 외부 상태를 변경하지 않는다.
- 함수 외부의 상태나 외부 요소에 의존하지 않는다.
- 부작용이 없기 때문에 예측 가능하고 테스트하기 쉽다.
React의 함수 컴포넌트
리액트의 함수 컴포너트는 props가 입력으로, JSX Element가 출력으로 나간다. 여기엔 그 어떠한 Side Effect도 없으며, 순수 함수로 작동한다.
하지만 보통 React 애플리케이션을 작성할 때에는, AJAX 요청이 필요하거나, LocalStorage 또는타이머와 같은 React와 상관없는 API를 사용하는 경우가
발생하여 React 입장에서는 Side Effect로 본다. 리액트는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공한다.
React 컴포넌트에서의 Side Effect
- 타이머 사용(setTimeout)
- 데이터 가져오기 (fetch API, localStorage)
질문 !!
어떤 함수가 Fetch API를 이용해 AJAX 요청을 한다면 이 함수는 순수 함수일까?
순수 함수라고 보기는 어렵다. AJAX요청은 네트워크 통신을 수행하며 함수 외부의 상태를 변경한다. 요청을 통해 얻은 데이터를 함수
외부에서 사용하거나 변경할 수 있기 때문이다. 또 비동기적으로 동작하기 때문에 함수의 반환값이 요청 결과에 의존하지 않을 수 있으며
동일한 인자에 대해 항상 동일한 결과를 보장할 수 없다.
Math.random()은 순수 함수가 아니다.
Math.random() 자바스크립트에서 제공하는 함수로, 0 이상 1 미만의 난수를 생성한다. 순수 함수란 동일한 인자에 대해 동일한 결과를 반환하는 것이고
그러기에 Math.random() 예측하기 어려운 난수를 생성하는데 외부 상태나 시스템 환경에 의존하기 떄문에 함수의 반환값은 현재 시간이나 다른 외부 요소에 의해
영향을 받는다. 따라서 순수 함수로 보기가 어렵다.
