[React] Side Effect

1️⃣ Side Effect 올바른 발생 시점

1-1. 함수 컴포넌트의 본문에서 바로 Side Effect를 발생시킬때의 문제점

• Side Effect가 렌더링을 blocking한다.
• 매 렌더링마다 Side Effect가 수행됨

1-2. React에서 Side Effect를 발생시키기 위한 조건

• 렌더링을 Blocking 하지 않기 위해서 렌더링이 모두 완료되고 난 후에 실행할 수 있어야 한다.
• 매 렌더링마다 실행되는 것이 아니라 원할때만 조건부로 실행할 수 있어야 한다.

2️⃣ useEffect 활용

import React, {useEffect} from 'react';

function App = () => {
  console.log('side effect')
  
  const printConsole = () => {
    console.log('side effect with useEffect')
  };
  useEffect(printConsole);
  
  console.log('render');
  return <h1>Hello World<h1>;
}

export default App;

// console.log
side effect
render
side effect with useEffect

3️⃣ useEffect 사용 방법

useEffect(콜백함수, 의존성 배열)

• 의존성 배열의 값을 검사할 것
• 의존성 배열에 들어가 있는 값이, 이전 렌더링과 비교했을 때 동일한가?
• 첫번째 렌더링에서는 무조건 콜백함수를 호출
• 두번째 렌더링부터는 의존성 배열의 값이 변했으면 콜백함수를 호출
• 만약 변하지 않았다면, 콜백함수를 호출하지 않는다.

// 계속 호출 
useEffect(()=> {
  console.log('when?')
});

// count와 text 중 하나라도 변했다면, 이펙트를 실행
useEffect(()=> {
  console.log('text changed')
},[count, text]);

// 첫번째 렌더링에서만 호출
useEffect(()=> {
  console.log('text changed')
},[]);