Side Effect란 ?

• 한마디로 부작용이다 어감상 부정적인 뉘앙스로 단어를 사용하곤 하지만 부작용은 부수효과라고도 표현이 가능하다 (부수효과 : 주요한 효과에 따라서 발생하는 부수적인 효과)
• 프로그램에서 부작용이란? 코드가 의도한 주된 효과 외에 추가적으로 발생하는 효과
  특히 "함수" 에서 자주 사용되는 용어

  함수의 본질 적인 역할(주된 효과) : input을 받아서 output을 산출하는 것
  함수의 Side Effect : input을 받아서 output을 산출하는 것 이외의 모든 행위

  • Side Effect가 없는 함수 : 순수함수
    const sum = (x) => { return x +1;}
  • Side Effect가 존재하는 경우 : 함수가 함수 외부의 값을 읽어오거나 변경하면 side effect 있다고 표현
    const num = 1;
const sum = (x) => {return x + num;} 함수내부의 값이 아닌 외부값 num을 읽어오고있음

프로그래밍에서 Side Effect 란?

기피해야하는 대상이다.

• Side Effect가 있는 함수는 동작 결과를 예측하기 쉽지 않다
• 이는 곧 유지보수의 어려움을 야기한다
• 프로그래밍에서 외부의 값을 읽어오거나, 변경하는 행위를 완전히 배제할 수는 없다
• 프로그램이 어떤값도 외부로 출력하지 않는다면 그 프로그램은 의미가 없다
• 또한 데이터를 저장해두고 저장해둔 값을 읽어오는 행위는 프로그램이에서 필수 불가결

Side Effect를 최소화 하면서 프로그램을 설계하되, 필요한 상황에서는 반드시 통제 가능하도록 만들어서 Side Effect가 프로그램의 유지보수에 악영향을 주지 않도록 설계해야한다

React 에서 Side Effect 란?

리액트에서 사용하는 함수 컴포넌트의 input과 output을 생각해보자

함수컴포넌트의 Input Output

• 리액트에서 렌더링이란 state, props 를 기반으로 UI를 그려내는 행위이다
• 리액트에서는 UI를 컴포넌트 단위로 구성하고, 컴포넌트들은 함수 컴포넌트를 이용해서 만들 수 있다
• 함수의 본질은 Input을 받아서 Output을 출력하는 것 이지만,
  React에서 함수 컴포넌트의 본질은 state props 를 통해서 JSX를 만들어 내는 것이 본질적인 역할이다
  - input : state, props
  (엄밀히 말하면 props는 인자로 받아오지만 state는 인자로 받는것이 아니라 useState hook을 통해서 꺼내오는 것)
  - output : JSX
  (state, props) => JSX
  

함수컴포넌트의 Side Effect

state와 props를 통해서 JSX를 만들어내는 외의 모든 행위

• Data Fetching
• DOM 접근 및 조작
• 구독(Subscribe)

1. Data Fetching

현대 개발에서는 프론트엔드와 백엔드의 역할이 나뉘어 있다

• 프론트엔드 : 복잡한 UI를 구성하고, 변화시키는 역할
• 백엔드 : 데이터를 저장, 처리, 가공하는 역할

프론트엔드가 백엔드 API를 통해서 필요한 데이터를 가져오는 행위는 필수적인 행위이다. 하지만, 이는 곧 외부(백엔드 API)로 부터 데이터를 가져오는 것이기에 Side Effect라고도 할 수 있다.

2. DOM 접근 및 조작

프론트엔드 개발자로서 웹개발시 DOM에 접근하고 조작하는 행위는 필수적이다.
하지만 React는 DOM 조작을 알아서 처리해주기에 개발자는 UI와 핵심 로직에만 신경쓰는 선언적인 개발이 가능해 졌다.

DOM에 직접 접근할 일이 많지 않고, 권장되지 않는다
특정한 상황에서 직접 DOM 접근해야만 하는 일이 있을때만 사용한다

DOM을 조작하는 것은 곧 외부의 값(DOM)을 읽어오고 변경하는 것이기에 Side Effect라고 할 수 있다.

3. 구독 (Subscibe)

프로그래밍에서 구독이란 ? 어떤 것을 계속해서 관찰하다가 변화가 발생하면 특정 액션을 취하는 것

• 개발에서 구독을 활용한 보편적인 예시로는 "시간을 구독하는 것" 이 있다
• 시간은 계속해서 변하고 있기에, 특정 시간이 지났을때 액션을 취하거나, 특정한 시간 주기마다 액션을 취하는 등의 행위를 시간을 구독함으로서 구현할 수 있다
• 실제 자바스크립트에는 시간을 구독하면서 특정한 시간이 지나면 동작을 수행해주는 setTimeout
  일정시간마다 특정 동작을 수행해주는 setInterval등의 메서드를 제공해줘서 쉽게 시간을 구독할 수 있는 기능을 제공하고있다