SideEffect

Side Effect란?

• 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과 (부작용 !
• 특히, 프로그램을 구성하는 작은 단위인 "함수" 에서 자주 사용되는 용어
• 함수의 본질적인 역할 (주된 효과)
• Input을 받아서 Output을 산출하는 것! → Input => Ountput
• 그렇다면 함수의 부작용 (Side Effect)는? → Input을 받아서 Output을 산출하는 것 이외의 모든 행위


 ▲ 위 함수는 함수 내부가 아닌, 외부의 상태를 읽어오기 때문에 SideEffect가 있는 함수입니다. (num)

x(input)을 받아서 x + num(output)을 산출

함수 내부의 값이 아닌 외부의 값인 "num" 을 읽어오고 있기 때문에 Side Effect가 있는 함수입니다.

함수가 함수 내부의 값을 제외한 나머지 값들을 읽어 올때 "Side Effect가 있다" 라고 표현 할 수 있습니다.
 ▲ 위 함수는 외부의 상태를 변경시키는 함수이기 때문에 Side Effect가 있는 함수입니다. (num의 값이 변경) ## Side Effect는 기피해야하는 대상

• SideEffect가 있는 함수는 동작 결과를 예측하기 쉽지않기 때문에 기피해야합니다.
• 함수의 결과를 예측할 수 없으면 프로그램의 동작을 예측하기 어렵기때문에 유지보수의 어려움을 야기합니다.
• 하지만, 프로그래밍에서 외부의 값을 읽어오거나, 변경하는 행위를 완전히 배제할 수 없습니다.
• 프로그램이 어떤 값도 외부로 출력하지않는다면 그 프로그램은 의미가 없으며 데이터를 저장하고 읽어오는 행위는 프로그래밍에서 필수적인 요소입니다.
• 따라서, 개발자들은 Side Effect를 최소화 하면서 프로그램을 설계하되, SideEffect가 필요한 상황에서는 반드시 통제 가능하게 만들어서 SideEffect가 프로그램의 유지보수에 악영향을 주기 않도록 해야 합니다.

## React에서의 Side Effect

• React에서 렌더링이란 state, props를 기반으로 UI를 그려내는 행위
• React에서는 UI를 컴포넌트 단위로 구성, 그 컴포넌트들은 함수 컴포넌트를 이용해서 만들 수 있습니다.
• 함수의 본질은 Input을 받아서 Output을 출력하는 것
• 그렇다면 React의 함수 컴포넌트의 본질은?
• 함수 컴포넌트는 state, props를 통해서 JSX를 만들어낸는 것이 본질적인 역할입니다.
  → Input: state, props
  → Output: JSX
  → (state, props) => JSX
  

## 함수 컴포넌트의 SideEffect

• 함수 컴포넌트의 SideEffect는 state와 props를 통해서 JSX를 만들어내는 것 외의 모든 행위 → Data Fetching → DOM 접근 및 조작 → 구독 (Subscribe)

###Data Fetching

• 현대 개발에서 프론트엔드는 복잡한 UI를 구성하고, 변화시키는데에 초점을 두고 있고, 백엔드는 데이터를 저장, 처리, 가공하는 역할을 담당합니다.
• 이러한 구조에서 프론트엔드가 백엔드 API를 통해서 필요한 데이터를 가져오는 행위는 필수적인 행위
• 하지만, 이는 곧 외부(백엔드 API)로 부터 데이터를 가져오는 것이기에 Side Effect라 할 수 있습니다.

### DOM 접근 및 조작

• 프론트엔드 개발자로서 웹 개발을 할 때 DOM에 접근하는 행위는 필수적입니다.
• React는 DOM의 조작을 React에서 처리해주기에 개발자는 UI와 핵심 로직에만 신경쓰는 선언적인 개발이 가능해졌습니다.
• 따라서, DOM에 직접 접근할 일이 많지않고, 권장되지 않습니다.
• 하지만 특정 상황에서는 직접 DOM을 조작해야 하는 일이 있을 수 있습니다.
• 이는 곧 외부의 값(DOM)을 읽어오고 변경하는 것이기에 SideEffect라고 할 수 있습니다.

### 구독 (Subscribe)

• 프로그래밍에서 구독이란, 어떤 것을 계속에서 관찰하다가 변화가 생기면 특정한 액션을 취하는 것을 말합니다.
• 개발에서 구독을 활용하는 가장 보편적인 예시는 "시간을 구독하는 것"입니다.
• 시간은 계속해서 변하고 있기에, 특정 시간이 지났을 때 액션을 취하거나, 특정한 시간 주기마다 액션을 취하는 등의 행위를 시간을 구독함으로서 구현할 수 있습니다.
• 실제 자바스크립트에서는
  → 시간을 구독하면서 특정한 시간이 지나면 동작을 수행해주는 "setTimeout"
  → 일정 시간마다 특정 동작을 수행해주는 "setInterval"등의 메서드를 제공해줘서 쉽게 시간을 구독할 수 있는 기능을 만들 수 있습니다.
  
• 이 또한 외부의 값의 변화를 계속해서 관찰하고 거기에 맞춰서 동작을 하는 것이기에 Side Effect 라 할 수 있습니다.

## 요약 ▶ 프로그래밍에서 SideEffect란, 함수가 함수 내부의 값 외에 '외부의 값을 읽어오거나, 수정하는 행위'
▶ SideEffect는 함수의 동작 결과를 예측하기 어렵게 만들기에 일반적으로 기피해야하는 대상이지만, SideEffect를 하나도 발생시키지 않고 프로그래밍을 할 수는 없습니다.
▶ 프론트 엔드 개발에서도 Data Fetching, DOM 접근 및 조작, 구독 등의 Side Effect를 발생시켜야 하는 순간이 있습니다.
▶ 프론트엔드 개발을 할 때는 이러한 Side Effect를 적재적소에 사용하고, 관리하면서 예측 가능하고 유지 보수하기 용이한 프로그램으로 만들어야합니다.