[React] Side Effect

📕Side Effect란?

📔Side Effect 개념

side effect를 번역하자면 부작용 정도로 번역이 된다.
프로그래밍에서의 부작용은 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과라고 할 수 있다.
특히, 프로그램을 이루는 가장 작은 단위인 함수에서 쓰이는 용어이다.
프로그래밍에서 함수의 주된 목적은 Input을 받아서 output을 산출하는 것이다.
따라서, 함수의 부작용이란 함수의 목적인 Input을 받아서 output을 산출하는 것 이외의 모든 행위를 의미한다.

정리하자면,
프로그래밍에서 side effect는 함수가 input을 받아서 output을 산출하는 과정에서,
1. 외부의 값을 읽어오는 행위
2. 외부의 값을 변경하는 행위 를 의미한다.

📔Side Effect 예시

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

위의 예시에서 sum 함수는 x라는 input을 받아서 x+1이라는 Output을 산출하는 함수이다.
이 함수는 input을 받아서 output을 내는 행위 외에 다른 행위를 하지 않으므로 sice effect가 없다고 할 수 있다.
이처럼 side effect가 없는 함수를 순수 함수라고 한다.

side effect를 일으키는 행위

let num;

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

위의 코드는 변수 num이 있고, sum 함수는 x를 인자로 받아서 num에 x+1을 할당한다.
이 함수는 함수가 외부의 값인 num을 변경시키고 있기 때문에 side effect를 발생시킨다.

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

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

위 두가지 코드들도 모두 side effect를 발생시킨다.
DOM을 조작하고, console에 특정 문자를 출력하는 행위 또한 함수 외부에 존재하는 DOM과 console의 상태를 변경시키는 것이기에 side effect가 발생한다고 할 수 있다.

📔정리

그렇다면, 프로그래밍에서 side effect는 기피해야 하는 대상일까 ? 정답은 그렇다 이다.
side effect가 있는 함수는 동작 결과를 예측하기 쉽지 않기 때문이다
const sum = x => x+1이란 함수는 항상 1을 인자로 넣으면 2가 return 될 것이라 예측할 수 있지만 const sum = x => x+num이란 함수는 num 값이 어떻게 변할지 모르기 때문에 결과를 예측하기가 어려워진다.
따라서, 프론트엔드 개발을 하면서 이러한 side effect들을 적재적소에 사용하고, 관리하면서 예측 가능하고 유지 보수하기 용이한 프로그램을 만들고자 해야한다.

📕React에서의 Side Effect

📔함수 컴포넌트에서의 input과 output

React에서 rendering이란 state, props를 기반으로 UI 요소를 그려내는 행위이다.
함수 컴포넌트는 state와 props를 통해서 JSX를 만들어내는 것이 본질적인 역할이다.
따라서, 함수 컴포넌트의 input은 state, props이며 output은 JSX이다.

📔함수 컴포넌트에서의 side effect

UI를 만들어내는 과정에서 발생시켜야 하는 side effect의 대표적인 사례들에 대해 알아보자.

1. Data Fetching
   현대 개발에서 프론트엔드는 복잡한 UI를 변화시키는 데에 초점을 두고 있고, 백엔드는 데이터를 저장하고 처리하고 가공하는 역할을 맡고 있다.
   이런 구조 속에서 ㅍ론트엔드가 백엔드 API를 통해 기존에 저장된 데이터를 가져오는 행위는 필수적으로 발생하게 된다.

2. DOM 접근 및 조작
   프론트엔드 개발자로서 웹 개발을 하는 이상 DOM에 접근하고 조작하는 행위는 필수적이다.
   물론 React는 DOM에 직접 접근할 일이 많지도 않고 대부분의 상황에서 권장되지 않지만 특정 상황에서는 DOM에 접근하고 직접 조작을 해야하는 상황이 발생한다,

3. 구독(Subscribe)
   프로그래밍에서 구독이란 어떤 것의 변화를 지켜보다가 변화가 발생하면 특정한 액션을 취하는 것을 의미한다. 개발에서 구독이란 개념을 이용해서 여러 가지 동작을 처리할 수 있지만, 웹 개발에서 흔히 구독하는 것은 시간이다.
   시간은 계속해서 흐르고 있다. 그래서 자바스크립트는 시간을 구독하면서 일정 시간이 지나면 특정 동작을 수행해 주는 메서드인 setTimeout, 일정 시간마다 특정 동작을 수행해주는 setInterval메서드를 제공해주고 이를 이용해서 시간의 변화에 따라 원하는 동작을 이행시킬 수 있다.