[React] useEffect

Effect Hook

1. useEffect

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

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

1. blocking rendering, side effect함수가 실행되는 동안 화면 렌더링이 되지 않습니다.
2. always trigger 문제가 발생합니다. 예를 들어 rerender될 때마다 무조건 data fetching이 일어나게 되면 서버에 과부하가 오게 됩니다.

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

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

sideEffect를 발생시키고 싶다면 useeffect를 쓰면 됩니다 :)

이것은 일단 usestate처럼 react에서 미리 만들어 놓은 훅입니다.

일단 기본 모양은 이렇게 생겼습니다.

useEffect( () => {}, [] ) 

즉, useEffect ( effect, dependency array ) 라고 할 수 있습니다.

2. useEffect 쓰면 좋은 점

2-1. useEffect에 넣어놓은 effect는 무조건 render 이후에 실행이 되기 때문에 rendering을 block하는 문제를 방지할 수 있습니다.

2-2. dependency array에 있는 state값이 변했을 때 effect가 실행됩니다.

dependency array에서는 보통 state를 쓰는데, 'useEffect ( 함수, [state명] )' 에서 배열 안에 있는 state 값이 바뀌었을 때만 함수가 실행되는 걸 볼 수 있습니다.

3. Rendering Cycle with 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
}, [value1, value2])


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