Side Effect란?
원래 주된 목적에서 벗어나 다른 결과가 나타나는 현상을 말합니다.
웹 프로그래밍 작업을 하며 우리는 필요한 기능을 함수단위로 작성하게 되는데,
이러한 함수의 원작용은 Input을 받아서 output을 산출하는 것입니다.
따라서, 프로그래밍 언어에서 Side Effect가 의미하는 말은
Input을 받아서 output을 산출하는 것 외의 모든 행위를 의미하게 됩니다.
// 1. Side Effect 발생 X => 함수 내부에서 원하는 결과 값 도출
const sum = (x) => {
return x + 1;
};// 2. Side Effect 발생 O => 함수 외부의 변수를 읽어옴
const num = 1;
const sum = (x) => {
return x + num;
};// 3. Side Effect 발생 O => 함수 외부의 변수 상태를 변경시킴
let num;
const sum = (x) => {
num = x + 1;
};
// 4-1. Side Effect 발생 O => 함수 외부에 존재하는 console의 상태를 변경시킴
const printNum = (x) => {
console.log(x);
};
// 4-2. Side Effect 발생 O => 함수 외부에 존재하는 DOM의 상태를 변경시킴
const changeTitle = (newTitle) => {
const title = document.getElementById('title');
title.innerText = newTitle;
};
프로그래밍에서
필요한 기능을 함수단위로 작성하는 경우
Side Effect는
- 함수 외부의 값을 읽어오는 행위
- 함수 외부의 값을 변경하는 행위 를 의미합니다.
React에서의 Side Effect란?
React에서 rendering이란,
state, props를 기반으로 UI 요소를 그려내는 행위를 말합니다.
여기에서 리액트는 함수컴포넌트를 활용하여 UI요소를 그려내게 되는데,
함수컴포넌트의 역할은 props와 state를 활용하여 JSX를 return하는 것입니다.
도식화하면 다음과 같습니다.
// React에서 함수컴포넌트의 원작용
function (state, props) => JSX그러므로 React 함수 컴포넌트에서의 Side Effect란
state와 props를 이용하여 JSX를 return하는 활동 외의 모든 행위를 의미하게 됩니다.
대표적으로는
Data Fetching (외부에서 Data를 가져오는 행위),
DOM 접근 및 조작 (함수 외부의 DOM을 조작하는 행위),
구독(Subscribe - 함수 외부의 어떤 것의 변화를 계속해서 감지하는 행위)
등이 있습니다.
결론
Side effect는 함수의 동작 결과를 예측하기 어렵게 만들기에
일반적으로는 기피해야하나, 필요(Data Fetching, DOM 접근 및 조작등)에 따라
잘 사용하여 예측이 가능한 프로그램을 만들어야 한다.
