[React] Side Effect?

Side Effect? 부작용? 뭐지?

본질적인 역할 외에 일어나는 부수적인 효과들

ex) 감기약의 본질적인 역할 => 감기를 낫게 하는 것 => 졸린다(부수적인 효과)

컴퓨터 과학에서 함수가 결과값 이외에 다른 상태를 변경시킬 때 부작용이 있다고 말한다.
위키피디아

즉, input - output 이외의 다른 값을 조작한다면 이 함수에는 Side Effect가 있다고 표현한다.

//Side Effect가 없는 함수 (순수함수)
const sumOne = (num) => {
	return num + 1;
}

//Side Effect가 있는 함수(console은 외부에 있는 요소이며 외부에 있는 요소에 접근하거나 수정하면 side effect)
const sumOne = (num) => {
  	console.log("num: ", num)//Side Effect
  
	return num + 1;
}

//Side Effect가 있는 함수(함수 외부에 있는 내용을 읽어왔기 때문에)
const plusNum = 30;
const sumNum = (num) => num + plusNum;

//Side Effect가 있는 함수
let result = 0;
const sum = (num) => {
	result = result + num;
}

정리하자면

input으로 들어온 값, 함수 블럭 내부에 있는 값 외에 외부에 있는 값을 읽어오거나 수정하는 행위를 했을 때 그 함수가 Side Effect를 일으켰다라고 표현한다.

React 함수 component에서 Side Effect는 뭘까?

함수 컴포넌트의 Side Effect는 state와 props를 받아서 UI를 그려내는 것 이외의 행위라고 할 수 있다.

대표적으로 Data Fetching(백엔드에서 읽어오는 외부에 있는 값),
DOM에 직접 접근(외부에서 가져오는 것이 DOM이니깐)(ex. Event Listener 등록),
구독(ex. setInterval)과 같은 행위들이 있다. 이들은 모두 컴포넌트에서 꼭 필요한 대표적인 Side Effect 이다.
구독은 내가 어떤 유튜버를 구독하면 그 유튜버가 업로드 할 때마다 나에게 알림을 주거나 피드에 올려준다. 그런 기능이 setInterval. 여기서는 시간을 구독한다. 몇 초마다 뭘 하기 그런 구독을 일컫는 것