[React] useEffect()

useEffect - 훅을 활용해 Side Effect(부수효과)를 일으킬 수 있다.

Side Effect

• 부수 효과가 있다 -> 단순히 부정적인 의미로만 사용하지 않는다.
• 함수 컴포넌트에서의 side Effect는, 렌더링이 아니고 외부세계에 영향을 주는 어떠한 행위
• 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는것이 권장된다.
• 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이 없을 경우에도 영향을 최소화 시킬 수 있어서 샤용자 경험 측면에서 유리하다.

대표적으로 Data Fetching(서버에서 원하는 데이터를 받아오는 행위), DOM에 직접 접근(ex. Event Listener 등록), 구독(ex. setInterval)과 같은 행위들이 있습니다. 이들은 모두 컴포넌트에서 꼭 필요한 대표적인 Side Effect 이다.

---

useEffect

함수 컴포넌트의 리턴값이 ui 요소이고, state,props의 변화가 있을때마다 함수가 실행된다.
이 말은 매 렌더링 때마다 함수 body에 있는 로직이 실행된다는 뜻이다.

1. render를 방해 -> 렌더링이 완료된 후 이펙트가 실행된다.
2. 매번 실행 된다.

형식

useEffect(() => {})
useEffect(() => {},[의존성배열 -> 배열안에있는 값이 바뀔때마다 
내부에있는 sideEffect를 실행하겠다.])
useEffect(() => { console.log ('first effect');
},[]) -> 한번만 실행시켜야할때는 배열 내부를 빈배열로

useEffect(() => {
fetch("api 주소");
}, []);

- 데이터를 불러올때 사용하는 형식
- fetch (내장함수)

또한 렌더링과 무관한 로직이 렌더링 과정에서 실행되기 때문에 렌더링 자체에 영향을 줘 성능상 악 영향을 끼칠 수 있다.

function greetWithSideEffect({ name }) { // 
  // Bad!
  document.title = `${name}님 안녕하세요!`; // Side Effect

  return <div>{`${name}님 안녕하세요!`}</div>; // Output
}

그래서 React에서는 이런 Side Effect를 일으키기 적절한 장소로서 useEffect hook을 제공한다.

• useEffect는 SideEffect를 렌더링 이후에 발생시킨다.
• 만약 Side Effect이후 업데이트 된 정보가 있어 새롭게 화면이 그려져야 할 경우 새롭게 렌더링을 일으킨다.
• 함수 컴포넌트는 최신 state와 props를 반영한 화면을 리턴하게 된다.
• Effect를 일으킬 타이밍은 앞서 설명했던 useEffect의 두번째 인자인 의존성배열을 통해 표현하게 된다.

Rendering Cycle with useEffect

import { useEffect } from "react"

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

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

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

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