✅ Side Effect

💡 프로그래밍에서 “부작용(Side Effect)”?

• 코드가 의도한 주된 효과 외 주기적으로 발생하는 효과
• 프로그램을 이루는 가장 작은 단위 = 함수에서 쓰이는 용어
• 함수의 본질적인 역할⇒ input을 받아 output을 산출하는 것
• 함수의 부작용 ⇒ input을 받아 output을 산출하는 것 이외의 모든 행위

Side Effect

• input인 x를 받아서 output인 x + 1을 산출하는 함수
• 순수함수 = input ⇒ output 외 다른 행위 없음, side effect ❌

// 순수 함수

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

📌 외부 상태 읽어오기

• input인 x를 받아서 output인 x + num을 산출
• side effect를 ⭕️ ⇒ 함수 외부의 값인 “num”을 읽어오고 있기 때문
• side effect = 함수가 함수 내부의 값을 제외한 나머지 값들을 읽어 올 때

// 외부 상태 읽어오기

const num = 1;

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

📌 외부 상태 변경시키기

• input인 x를 받아서 output인 num을 x + 1 로 변경
• side effect ⭕️ ⇒ 함수 외부의 값인 “num”을 읽어오고, 변경시키기 때문
• side effect = 함수가 함수 외부의 값을 변경할 때

// 외부 상태 변경시키기

let num;

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

🤔 Quiz

• 외부의 값 ≠ 외부의 변수
• DOM 조작, 콘솔 패널에 문자를 출력
  => 또한 함수 외부에 존재하는 DOM과 콘솔의 상태를 변경 시키는 것
• 두 함수 모두 side effect가 존재 !!

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

//2
const changeTitle = (newTitle) => {
  const title = document.getElementById('title');

  title.innerText = newTitle;
};

✅ Summary

💡 Side Effect?

프로그래밍에서 side effect는 함수가 input을 받아서 output을 산출하는 과정에서

1. 외부의 값을 읽어오는 행위
2. 외부의 값을 변경하는 행위

📌 프로그래밍에서 Side Effect는 기피해야하는 대상 !

• 함수 동작 결과를 예측하기가 쉽지 않기 때문이다

// 예측 가능(side effect❌)
const sum = (x) => x + 1;

// 예측 불가(side effect⭕️)
const sum = (x) => x + num;

• 유지보수의 어려움
  ⇒ 하지만, 프로그램이 외부로 그 어떤 값도 출력하지 않는다면 그 프로그램은 의미가 없고,
  또한 데이터를 어딘가에 저장해두고 저장되어 있는 값을 읽어오는 행위는 프로그래밍에 있어서
  필수불가결한 요소
• 따라서, side effect를 최소화 하면서 프로그램을 설계,
  side effect가 필요한 경우 반드시! 통제 가능하게 만들어 유지보수에 악영향을 주지 않도록 주의할 것

💡 React에서의 Side Effect

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

• React에서 rendering = state, props를 기반으로 UI 요소를 그려내는 행위
• props와 state를 통해 JSX를 만들어 내는 것이 본질적인 역할
• (props, state) = JSX
  
  

1. Data Fetching
   ⇒ 프론트엔드가 백엔드 API를 통해서 기존에 저장된 데이터를 가져오는 행위는 필수적으로 발생
   
   
2. DOM 접근 및 조작
   ⇒ React는 DOM의 조작을 React에서 대신해주고 개발자는 UI와 핵심 로직에만 신경 쓰도록 선언적인 개발을 가능하게 해주기 때문에 DOM에 직접 접근할 일이 많지도 않고 대부분의 상황에서 권장되지 않지만
   ⇒ 특정 상황(document 객체에 scroll eventListener를 등록하는 등)에서는 DOM에 접근하고 직접 조작을 해야 하는 상황이 발생
   
   
3. 구독(Subscribe)
   ⇒ 프로그래밍에서의 "구독"이란 어떤 것의 변화를 계속해서 지켜보고 변화가 발생하면 특정한 액션을 취하는 것, 웹 개발에서 흔히 구독하는 것은 시간, 시간은 고정되어있지 않고 항상 변화함
   ⇒자바스크립트는 시간을 구독하면서 일정 시간이 지나면 특정 동작을 수행해 주는 메서드인 setTimeout, 일정 시간마다 특정 동작을 수행해주는 setInterval 메서드를 제공해주고 이를 이용해서 시간의 변화에 따라 원하는 동작을 이행한다