[React] useEffect

📓useEffect

Data Fetching, 구독 등의 side effect는 매우 조심스럽게 다뤄야 한다.
리액트에서 side effect는 언제 어떻게 발생시켜야 할까 ?

📙React에서 side effect의 올바른 발생 시점

const App = () => {
	return <h1>Hello World</h1>
};

위의 코드에서 Hello World형태의 JSX를 브라우저에 렌더링 한다. 이 상황에서 side effect를 발생시키고 싶다면 어떻게 해야할까 ??
가장 먼저 떠올릴 수 있는 생각은 '함수의 return문 위에 하고싶은 동작을 넣어두자'이다.

const App = () => {
	const doSideEffect = () => {
    	//do some side effect
    };
    
    doSideEffect();
    
    return <h1>Hello World</h1>;
};

하지만 위와 같이 랜더링 단계에서 side effect를 발생시키면 두 가지 문제가 발생한다.
1. side effect가 렌더링을 blocking한다.
2. 매 랜더링마다 side effect가 수행된다.

무슨말인가하면 !

🔥side effect가 렌더링을 blocking

const App = () => {
	const doSideEffect = () => {
    	//do some side effect
    };
    
    doSideEffect();
    
    return <h1>Hello World</h1>;
};

기본적으로 코드는 위에서 아래로 순차적으로 실행된다. 따라서 App 함수 컴포넌트는 doSideEffect()동작이 끝날 때까지 JSX를 리턴하는 코드로 넘어가지 않는다. 컴포넌트가 JSX를 return하기 전까지는 UI가 브라우저상에 랜더링 되지 않기 때문에 결국 사이드 이펙트가 끝나기 전까지 렌더링을 하지 못하고 멈춰있게 된다.

즉, 사용자가 UI가 업데이트되는 것을 보기까지 오랜 시간이 소요된다는 것이다. 이는 곧 사용자에게 좋지 못한 사용자 경험을 제공한다는 의미이다.

🔥매 랜더링마다 side effect가 수행

특정한 side effect들은 매번 실행될 필요가 없을 수도 있다. 예를 들어 인스타그램에서 피드에 대한 정보를 받아서 리스트를 보여주는 화면이 있다. 피드를 보여주기 위해서는 최초에 피드 데이터들을 가져오는(Data Fetching) side effect가 필요하다.

생각을 해보면, 외부에서 가져오는 side effect는 매 랜더링마다 수행될 필요는 없다.

const App = () => {
	//data fetching side effect
    
    getFeeds();
    
    return FeedList;
};

피드리스트에서 특정 피드에 좋아요를 눌르면 하트 색깔이 변경된다. 색상을 변경하려면 컴포넌트에서 리랜더링을 발생시켜야 하는데, 리랜더링이 된다는 것은 함수 컴포넌트를 다시 한번 호출한다는 뜻이다.
(리액트는 컴포넌트의 state나 props가 변하면 자동으로 해당 함수 컴포넌트를 다시 호출하면서 리랜더링을 수행해준다.)

즉, App이라는 함수가 다시 호출되고 그렇다면 다시 함수 내부의 코드를 위에서 아래로 순차적으로 실행시킨다.
그 말은 다시 한번 getFeeds() side effect를 발생시킨다는 의미이다.

작은 UI 업데이트 발생 시 마다 매번 모든 피드 데이터를 다 가져온다면 불필요한 동작을 계속 수행하기에 비효율적이다.

🔥정리하자면

React에서 side effect는
1. 랜더링을 blocking 하지 않기 위해서 랜더링이 모두 완료되고 난 후 실행할 수 있어야 한다.
2. 매 랜더링마다 실행되는 것이 아니라 내가 원할 때만 조건부로 실행할 수 있어야 한다.

위 두가지 조건을 충족시키면서 발생시키는 것이 좋다.
이 두가지를 충족시키면서 side effect를 발생시킬 수 있게 도와주는 것이 useEffect 라는 hook이다.

📙useEffect 사용법

useEffect는 리액트에서 side effect를 편리하고 안전하게 발생시킬 수 있게 도와주는 hook이다.
사용법은,
useEffect(콜백함수);

useEffect는 함수이고, 매개변수로 콜백 함수를 가진다. 우리는 useEffect에 인자로 전달하는 콜백 함수에서 특정한 side effect를 수행시킬 수 있다.

const App = () => {
	doSideEffect();
    
    return <h1>Hello World</h1>
};

위 코드는 useEffect없이 side effect를 발생시키는 코드이다. 여기서는 side effect를 랜더링 전에 발생시키고 있다. 이러한 코드는 렌더링을 blocking하기에 좋지 않기에 이를 해결하기 위해서 useEffect를 사용할 수 있다.

import { useEffect } from 'react';

const App = () => {
  // 코드 생략

  useEffect(doSideEffect);

  return <h1>Hello, Wecoder</h1>;
};

side effect를 발생시키는 함수를 바로 후철하는 것이 아니라 useEffect의 인자로 전달했다.
위와 같이 useEffect의 인자로 전달된 콜백 함수는 곧바로 호출되는 것이 아니라 모든 랜더링이 완료된 후에 호출된다.
즉, 랜더링을 blocking 하지 않고 side effect를 발생시킬 수 있게 되는 것이다.

📙조건부로 side effect 발생시키기

useEffect를 통해서 랜더링이 모두 완료되고 난 후 side effect를 실행한다는 요구사항은 충족되었지만 아직도 매 랜더링마다 side effect가 실행된다는 사실은 변함이 없다.
특정 조건이 충족할 때만 발생시키는 방법은 무엇일까 ?

useEffect는 콜백 함수 외에 의존성 배열이라는 두번째 매개변수를 가진다.
의존성 배열은 배열의 형태이다. 이 배열이 side effect의 발생 여부르 결정짓는 조건이다.

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

useEffect의 동작 방식
첫 번째 랜더링 이후에는 무조건 useEffect에 전달된 콜백 함수를 호출하고 다음 랜더링부터는 아래의 조건에 따라 동작한다.

1. 의존성 배열이 전달되지 않았다면 매 랜더링마다 콜백 함수를 호출한다.
2. 의존성 배열이 전달되었다면 의존성 배열의 값을 검사한다.

• 의존성 배열에 있는 값 중 하나라도 이전 랜더링과 비교했을 때 달라졌다면 콜백 함수를 호출한다.
• 의존성 배열에 있는 값이 이전 랜더링과 비교했을 때 모두 다 같다면 콜백 함수를 호출하지 않는다.

즉, useEffect에서 첫 번째 인자인 콜백 함수는 실행시킬 동작을 결정하고 두 번쩨 인자인 의존성 배열은 실행시킬 타이밍을 결정짓는다고 할 수 있다.

📙Rendering & Effect Cycle

출처: https://dmitripavlutin.com/react-useeffect-explanation/

위의 그림은 useEffect와 React Component가 렌더링 되는 과정을 함꼐 도식화 한 다이어그램이다.

함수 컴포넌트의 렌더링과 useEffect가 발생하는 과정을 풀어서 설명하면,
1. 컴포넌트가 렌더링 된다. (최초로 진행되는 렌더링은 브라우저에 처음으로 이 컴포넌트가 보였다는 의미로 mount라고 표현한다.)
2. useEffect 첫 번째 인자로 넘겨준 콜백 함수가 호출된다 (side effect)
3. 컴포넌트의 state 또는 props가 변경되었을 경우 리렌더링이 발생한다. (update)
4. useEffect는 두 번째 인자에 들어있는 의존성 배열을 확인한다.
- 만약 의존성 배열이 전달되지 않았거나, 의존성 배열 내부의 값 중 이전 렌더링과 비교했을 때 변경된값이 하나라도 있다면 첫 번째 인자로 넘겨준 콜백 함수가 호출된다. (side effect)
- 의존성 배열 내부의 값 중 이전 렌더링과 비교했을 때 변경된 값이 없다면 콜백 함수를 호출하지 않는다.
- state 또는 props가 변경된다면 3 - 4 과정 반복
5. 컴포넌트가 더 이상 필요 없어지면 화면에서 사라진다. (컴포넌트가 브라우저의 화면에서 사라졌다는 의미로 unmount라고 표현한다.)

📓Clean Up

📙Clean Up의 필요성

불필요하게 계속해서 side effect가 남아있어서 비효율적으로 작동할 수 있고, 프로그램의 동작이 의도한 대로 되지 않을 수 있기 때문에 지속적으로 남아있게되는 side effect를 반드시 clean up해줘야 한다.

useEffect(() => {
	const cntTime = () => {
    	console.log('100ms가 지남');
    };
    
    setInterval)cntTime, 100);
}, []);

위의 side effect는 claen up이 필요하다.
코드를 보면 setInterval 함수를 이용해서 100ms마다 cntTime 함수가 호출된다.
useEffect의 의존성 배열에 빈 배열이 전달되었으므로 첫 번째 랜더링 이후에 side effect가 실핸된다.
그런데 이 side effect를 clean up 해주지 않는다면 컴포넌트가 unmount 되는 경우 등 setInterval을 통한 구독이 필요 없어진 상황에서도 계속해서 콘솔이 출력이 된다.

또 다른 예를 들어보면,

useEffect(() => {
  const button = document.getElementById('consoleButton'); // 1

  const printConsole = () => {
    console.log('button clicked');
  }; // 2

  button.addEventListener('click', printConsole); // 3
});

useEffect에 의존성 배열을 전달하지 않았을 때 side effect가 매 렌더링마다 실행된다.
위의 코드는 아래의 순서로 동작을 하고 있다.

1. document.getElementById 메서드를 통해서 consoleButton이란 ID를 가진 요소를 가져와서 button 변수에 할당한다.
2. printConsole 함수를 선언한다.
3. button에 클릭 이벤트가 발생할 때마다 printConsole이 실행되도록 button에 eventListener로 등록한다.

이 side effect는 매 렌더링마다 실행되기 때문에 렌더링이 될 때마다 button에 eventListener가 추가된다. 즉 eventListener가 계속해서 중첩되고 있다는 뜻이다.

따라서, 첫 렌더링 이후에는 버튼을 누르면 콘솔이 한번만 출력되지만, 두 번째 렌더링이 되면 이벤트리스너가 한번 더 추가되기 때문에 렌더링이 될 때마다 콘솔 출력 횟수가 늘어나게 된다.

그래서 clean up이 필요한 것이다.

📙Clean Up 방법

useEffect는 side effect를 clean up 할 수 있는 방법을 제공해준다.
useEffect에서 side effect를 clean up 하기 위해서는 useEffect에 전달한 콜백 함수에서 claen up을 하는 함수를 리턴하면 된다.

useEffect(() => {
  const button = document.getElementById('consoleButton');

  const printConsole = () => {
    console.log('button clicked');
  };

  button.addEventListener('click', printConsole);

  // side effect를 clean up 하기 위한 함수를 선언한다.
  const removeEventListener = () => {
    button.removeEventListener('click', printConsole);
  };

  // clean up 함수를 return 한다.
  return removeEventListener;
});

위의 코드로 보면 side effect를 없애기 위한 함수를 만들고, 그 함수를 리턴해주었다.
useEffect는 clean up 함수를 두 가지 경우에 호출한다.
1. 다음 side effect를 발생시키기 전
2. 컴포넌트가 unmount 될 때