위코드 파운데이션 과정을 들으며 정리한 내용입니다.

Side Effect 란?

Side Effect 는 한글로 표현하면, 부작용, 부수효과라고 할 수 있습니다. 주요 효과 이외에 부수적으로 일어나는 효과를 말합니다. 함수의 본질적 역할이 input 을 받아서 output 을 산출하는 것이라고 했을 때, Side Effect 는 이를 제외한 모든 행위를 말합니다.

const sum = (x) => {
	return x + 1;
};

위 함수는 input 받아서 output 내는 행위 외에는 다른 행위를 하지 않습니다. Side Effect 가 없는 것이고, 이런 함수를 순수 함수라고도 합니다.

const num = 1;

const sum = (x) => {
	return x + num;
};

input 을 받아서 output 을 산출하지만 그 과정에서 외부의 값인 num 을 읽어오기 때문에 Side Effect 가 있습니다.

let num;

const sum = (x) => {
	num = x + 1;
}

외부에서 선언된 값을 변경하는 것도 Side Effect 입니다.

const printNum = (x) => {
	console.log(x);
};

const changeTitle = (newTitle) => {
	const title = document.getElementById("title");
	
	title.innerText = newTitle;
}

함수 외부에 있는 DOM 과 콘솔의 상태를 변경하는 경우도 Side Effect 가 있다고 합니다.

이런 Side Effect 는 함수만 보고 동작을 예측할 수 없게 만들어 유지 보수를 어렵게 만듭니다. 하지만 프로그래밍에서 외부 값을 읽어오거나 변경하는 행위를 배제할 순 없으니 Side Effect 를 최소화하면서 설계하되, 필요한 상황에서는 통제 가능하게 만들어야 합니다.

리액트 Side Effect

React 에서 렌더링이란 state, props 를 기반으로 함수 컴포넌트를 만들어 UI 를 그려내는 일입니다. 함수의 본질이 Input 을 받아서 output 을 출력하는 것이라면 리액트 함수의 본질은 아래 처럼 표현할 수 있습니다.

input : state, props
output : JSX
(state, props) => JSX

리액트 함수의 Side Effect 는 state, props 를 통해 JSX 를 만들어내는 행위를 제외한 모든 것을 말하는데, 대표적으로 Data Fetching, DOM 접근 및 조작, 구독(Subscribe) 이 있습니다.

Data Fetching

프론트엔드가 백엔드의 API 를 통해 데이터를 가져오는 행위는 외부 데이터를 가져오는 것이므로 Side Effect 입니다.

DOM 에 접근 및 조작

리액트 DOM 조작을 대신 처리해주지만, 특정 상황에서는 직접 DOM 을 조작해야 합니다. 이는 외부의 값을 읽어오고 변경하는 것이므로 Side Effect 입니다.

구독(Subscribe)

프로그래밍에서 구독이란 변화를 지켜보다 변화가 발생하면 특정 액션을 취하는 것으로 구독을 활용하는 가장 보편적인 예시는 시간을 구독하는 것입니다. 계속 변하는 시간 속에서 특정 시간이 지났거나 특정 주기마다 액션을 취하는 등의 행위를 시간을 구독함으로써 구현할 수 있습니다. 실제 JS 에서는 특정 시간이 지나면 동작을 수행하는 setTimeout 과 일정 시간마다 특정 동작을 수행해주는 setInterval 등의 메소드를 제공합니다. 이는 외부의 값의 변화를 관찰하고 거기에 맞춰 동작하므로 Side Effect 입니다.