[React] Side Effect

Side Effect

side effect는 직번역을 하자면 '부작용'이지만, 여기서는 '함수의 외부에 끼치는 영향'을 의미한다.
예를 들어

function test(one, two) {
	return one*two;
    console.log(one*two)
}

그리고

let foo = 'hello';

function bar() {
  foo = 'world';
}

bar();

이 두 경우 모두 side effect를 발생시킨다고 할 수 있다.
가이드에서 설명하고 있는 side effect는 다음과 같지만 이외에도 더 있을 수 있다.

• 파일시스템 변경
• 데이터베이스에 기록
• http call
• 데이터 변경 (예시 2)
• 화면 그리기 / 로깅 / console (예시 1)
• 사용자 입력
• DOM 쿼리
• 시스템 상태에 접근
• Math.random()
• Getting the current time

Pure function (순수 함수)

순수 함수의 조건은 다음과 같다.

• 함수의 입력만이 리턴에 영향을 준다. 즉, 같은 값을 입력받으면 같은 결과를 리턴한다.
• side effect가 없다.

따라서 순수 함수는 해당 함수의 블럭만 신경쓰면 되기 때문에 작성과 유지보수가 간편하다.
정말 직관적인 예시를 들자면 다음과 같다.

function test(arg) {
	return arg
    }

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

Math.random()을 살펴보자

Math.random()
// 0.10610130734811052
Math.random()
// 0.020817351772336234
Math.random()
// 0.160704638515674

이처럼 Math.random()은 항상 다른 결과를 리턴하기 때문에 순수 함수라고 볼 수 없다.

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

fetch는 네트워크, 혹은 서버의 상태에 따라 반환하는 코드가 달라진다. 즉, 같은 값을 입력해도 상황에 따라 다른 결과를 리턴하기 때문에 순수 함수라고 볼 수 없다.

React의 함수 컴포넌트와 순수함수

React의 컴포넌트는 props를 인자로 입력받아 JSX Element를 리턴한다. 하나의 컴포넌트는 하나의 일만 한다. 따라서 컴포넌트에는 side effect가 존재하지 않는다. 즉, React의 함수 컴포넌트는 순수함수라고 할 수 있다.

function SingleTweet({ writer, body, createdAt }) {
  return <div>
    <div>{writer}</div>
    <div>{createdAt}</div>
    <div>{body}</div>
  </div>
}

React 컴포넌트에서의 Side Effect

• 타이머 사용(setTimeout)
• 데이터 가져오기(fetch API, localStorage)
  그러나 React 애플리케이션에서는 AJAX요청 혹은 LocalStorage혹은 타이머 등의 API를 사용하는 경우가 있을 수 있다. 이는 React의 입장에서는 모두 Side effect라고 볼 수 있으며, 이를 다루기 위해 React에는 Effect Hook이 존재한다.