🚀 학습 목표

• React에서 UI Rendering과 Side Effect의 차이를 구분하여 설명할 수 있다.
• useEffect hook을 활용해 다양한 Side Effect를 일으킬 수 있다.
• useEffect hook을 활용해 원하는 타이밍에 Side Effect를 일으킬 수 있으며, 이 과정에서 일어나는 컴포넌트 렌더링 과정을 설명할 수 있다.

---

React에서 UI Rendering과 Side Effect의 차이를 구분하여 설명할 수 있다.

✅ Rendering

• state,props를 기반으로 UI요소를 그려내는 행위.
• JSX 문법으로 무엇이 나타날지 적어둔 컴포넌트들
• input(state,proprs)에 따른 output(UI)을 표현하는 함수와도 구조적으로 동일하다.

✅ Side Effect

• 부작용, 부수효과로 감기약의 예시로 생각해 보자면 감기약의 주된 효과는 감기를 낫게하는것이지만 졸음이 오는 부작용이 발생된다.
  부작용이란 단어는 부정적으로 인식되지만 사실 부정적인 의미를 내포하지 않고 주요한 효과 외에 부수적으로 발생하는 효과를 의미한다.

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

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

• 순수함수

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

• 외부상태 읽어오거나 변경
  -함수 내부의 값이 아닌 외부의 값인 num을 읽어오고 있기 때문에 함수 내의 값(local state)을 제외한 나머지 값(non local state)을 읽어올 때 side effect가 있다고 표현함

const num = 1;

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

---

useEffect hook을 활용해 다양한 Side Effect를 일으킬 수 있다.

✅ React에서 Side Effect의 올바른 발생 시점

• React에서 side effect를 언제 발생시켜야 하는지
  1.랜더링을 Blocking하지 않기 위해 렌더링이 모두 완료되고 난 후 실행
  2.매 렌더링마다 실행되는 것이 아니라 내가 원할 때만 조건부로 실행

위의 요구사항을 모두 충족시키면서 편하게 side Effect를 발생시킬 수 있게 도와주는 useEffect를 활용한다.

✅ useEffect 사용법

import { useEffect } from "react"

// 사용법
useEffect (실행시킬 동작, [타이밍] )
document.addEventListener("타이밍", 실행시킬 동작) // 추상화 한 예시

// 매 렌더링마다 Side Effect가 실행되어야 하는 경우
useEffect(() => {
 // Side Effect
})

// Side Effect가 첫 번째 렌더링 이후 한번 실행되고,
// 이후 특정 값의 업데이트를 감지했을 때마다 실행되어야 하는 경우
useEffect(() => {
 // Side Effect
},[value])

// Side Effect가 첫 번째 렌더링 이후 한번 실행되고,
// 이후 어떤 값의 업데이트도 감지하지 않도록 해야 하는 경우
useEffect(() => {
 // Side Effect
},[])