프로그래밍에서 Side Effect란 함수가 함수 내부의 값 외에 외부의 값을 읽어오거나 수정하는 행위를 의미합니다.

1. Side Effect ???

1-1. Side Effect의 개념

• 프로그래밍에서는 Side Effect라는 용어가 있습니다.
• 프로그래밍에서의 부작용 은 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과라고 할 수 있습니다.
• 특히, 프로그램을 이루는 가장 작은 단위인 함수에서 쓰이는 용어입니다.
• 함수의 부작용 이란, 함수의 목적인 input을 받아서 output을 산출하는 것 이외의 모든 행위를 의미 합니다.

1-2. Side Effect의 예시

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

• 위 예시에서 sum 함수는 x라는 input을 받아서 x + 1 이라는 output을 산출하는 함수입니다.
• 이 함수는 input을 받아 output을 내는 함수 외에는 다른 행위를 하지 않기 때문에 side effect가 없다고 할 수 있습니다.
• 이처럼 side effect가 없는 함수를 순수 함수 라고 부릅니다.

1-2-1. 외부의 상태 읽어오기

const num = 1;

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

• 위의 예시에서 sum 함수는 x라는 input을 받아서 x+num 을 return 하고 있습니다.
• 이 함수는 Side Effect를 가지고 있습니다.
• 함수의 내부의 값이 아닌 외부의 값 num을 읽어오고 있기 때문입니다. 이와 같이 함수가 함수 내부의 값(local state)를 제외한 나머지 값 (non local state) 등을 읽어올 때 side effect가 있다고 표현할 수 있습니다.

1-2-2. 외부의 상태 변경시키기

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가 발생한다고 할 수 있습니다.

1-3. 자 그러니까 .. Side Effect는..

• 정리를 해보자면 Side Effect는 함수가 input을 받고 output을 산출하는 과정에서 외부의 값을 읽어오고, 변경하는 행위를 의미 합니다.
• side effect가 있는 함수는 동작 결과를 예측하기가 쉽지 않기 때문에 왠만해서는 기피해야 합니다.
• 그렇다고 아예 안 쓸수는 없으니 개발자들은 side effect를 최소화 하면서 프로그램을 설계하되 그것을 반드시 통제 가능하게 만들어서 side Effect가 프로그램의 유지보수에 악영향을 주지 않도록 해야 합니다.

2. React에서의 Side Effect

2-1. 함수 컴포넌트에서의 input과 output

• React에서 rendering 이란, state, props를 기반으로 UI 요소를 그려내는 행위를 뜻 합니다.
• 그렇다면 함수 컴포넌트에서의 input과 output은 무엇일까요?
• 함수 컴포넌트는 state와 props를 통해서 JSX를 만들어내는 것이 본질적인 역할입니다.
• 따라서 함수 컴포넌트의 input은 state와 props이며, output은 JSX 라고 표현 할 수 있습니다.
• 정리하면 React에서의 함수 컴포넌트는 state, props를 가지고 JSX를 만들어내는 함수이며, 이를 간단히 도식화하자면 (state, props) => JSX 라는 식으로 표현할 수 있습니다.

2-2. 함수 컴포넌트에서의 Side Effect

• 함수 컴포넌트에서의 Side effect는 대표적으로 어떤 것들이 있는지 알아봅시다.

1. Data Fectching

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

2. DOM 접근 및 조작

• React는 DOM의 조작을 React에서 대신해주기 때문에 DOM에 직접 접근할 일이 많지도 않고 대부분에 상황에서 권장되지 않지만, 특정 상황에서는 DOM에 적ㅂ근하고 직접 조작을 해야하는 상황이 발생합니다.

3. 구독(Subscribe)

• 프로그래밍에서의 구독 이란, 어떤 것의 변화를 계속해서 지켜보고, 변화가 발생하면 특정한 액션을 취하는 것을 말합니다.
• 개발에서는 구독이란 갠며을 이용해서 여러 가지 동작을 처리할 수 있지만, 우리가 웹 개발에서 흔히 구독하는 것은 시간 입니다.
• 시간은 고정되어 있지 않고 항상 변화합니다. 그래서 자바스크립트는 시간을 구독하면서 일정 시간이 지나면 특정 동작을 수행해주는 메서드 setTimeout과 일정 시간마다 특정 동작을 수행해주는 setInterval메서드를 제공해주고 이를 이용해서 시간의 변화에 따라 원하는 동작을 이행시킬 수 있습니다.