✨ Side Effect (부수 효과)
보통 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 side effect가 있다고 말한다. 이런 Side Effect를 최소화하거나 따로 분리하여 함수로 묶어주는 작업은 해당 프로젝트나 소프트웨어의 유지보수를 좀 더 수월하게 해준다.
React 에서는 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect 라고 한다. 대표적인 예로 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM을 직접 조작하는 등의 행동을 할 때 발생한다.
또한 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 사용자 경험 측면에서 유리하기 때문이다.
//함수의 side effect 예제
let foo = 'hello';
function bar() {
foo = 'world';
}
bar(); // bar는 Side Effect를 발생시킨다.🫧 Pure Function (순수 함수)
순수 함수란, 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수를 말한다. 함수의 입력이 아닌 다른 값이 함수 결과에 영향을 미칠시 순수함수가 아니다. 또한 순수 함수는 입력으로 전달된 값을 수정하지 않는다.
// 순수 함수의 예제
function upper(str) {
// toUpperCase 메소드는 원본을 수정하지 않는다 (Immutable)
return str.toUpperCase();
}
upper('hello') // 'HELLO'순수 함수에는 네트워크 요청과 같은 Side Effect가 없다. 순수 함수의 특징 중 하나는, 어떠한 전달 인자가 주어질 경우, 항상 똑같은 값이 리턴됨을 보장한다. 때문에 예측 가능한 함수이기도 하다.
-
🤔 Math. random() 은 순수 함수일까?
- 아니다. 랜덤한 숫자를 리턴해 예측이 불가하다.
-
🤔 어떤 함수가 fetch API를 이용해 AJAX요청을 한다면 이 함수는 순수함수일까?
- 아니다. 네트워크 상황, 서버상태에 따라 응답코드가 달라져 예측이 불가하다.
✍️ React의 함수 컴포넌트
보통 React 애플리케이션을 작성할 때에는 AJAX 요청이 필요하거나 LocalStorage 또는 타이머와 같은 React와 상관없는 API를 사용하는 경우가 발생할 수 있다. 이는 모두 React의 입장에선 Side Effect에 해당되며 React는 Side Effect를 다루기 위한 Hook인 Effect Hook을 제공하고있다.
-
💁♀️ React 컴포넌트에서의 Side Effet 예
- 타이머 사용 (setTimeout)
- 데이터 가져오기 (fetch API, localStorage)
