[React] useEffect : 사이드 이펙트

🎈 Side-Effect란

함수가 실행되면서, 함수 외부에 존재하는 값이나 상태가 변경되는 상황

• 사이드 이펙트 예시
  • 함수가 글로벌 변수 (또는 파일) 값을 변경 시킬때
  • 함수가 DOM을 조작할 때
  • 함수를 실행하며 쿠키가 저장할 때
  • 함수를 실행하며 API 요청을 보낼 때
  • props 로 받은 값을 컴포넌트의 로컬 상태로 설정
  • 라이브러리 사용 (D3, Video.js 등...)
  • setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

React 컴포넌트 외부에서 실행됨 -> 컴포넌트 렌더링 예측을 힘들게 함

🎈 Side-Effect 처리

useEffect : 컴포넌트 렌더링에 영향을 미치지 않으면서, 리액트 외부의 상태를 다룰 때 사용하는 훅

외부와 상호작용 해야 하는 코드를 useEffect()에 작성해서 분리한다

컴포넌트에 직접 사용하지 않고, 렌더링이 끝난 후에 실행되는 useEffect()에서 사용하여, Side-Effect를 컴포넌트 렌더링과 분리시킴

🎈 useEffect 함수 사용

useEffect(콜백함수, 배열)

• 콜백 함수 : 컴포넌트가 렌더링 된 후에 호출됨
• 의존성 배열 : side effect가 참고하는 값들을 담고있음

🔰 useEffect 의 세 가지 형태

useEffect(콜백함수) 
// 1. render 될 때마다 함수가 실행됨

useEffect(콜백함수, 빈 배열)
// 2. 처음 render 될 때만 실행됨

useEffect(콜백함수, [의존값들])
// 3. 참고 값들이 바뀔 때마다 실행됨

🔰 사용 예

const User = ( {name} ) => {
 
  useEffect(() => {
    document.title = `${name} 님의 마이페이지`  // 돔을 조작함
  }, [name])
  
  return <h1>`${name} 님 환영합니다`</h1>
  
}

→ 값 name 이 바뀔 때마다 document.title 이 업데이트된다.