React | useEffect() 를 써보자

리액트의 함수 컴포넌트에서는 side effect를 발생시키고자 했을 때
아래 코드처럼 함수를 return문 위에 만들어 호출하면 어떨까?
렌더링 순서는 sideEffect가 함수가 실행되고 리턴할 값이 나온다.
 

const Component = () => {
  
  const sideEffect = () => {
    사이드리팩트 실행 내용;
  };
  
  sideEffect();
  
  return (
    리턴할 값
  );
}

 
 

여기엔 두 가지 문제점이 생긴다.

1.side effect 가 렌더링을 Blocking 한다.
코드는 위에서 아래방향으로 실행된다.
sideEffect라는 함수가 시간이 오래 걸리는 함수라면
side effect가 끝나기 전까지 브라우저 상에서는 UI가 렌더링 되지 못하고 멈추게 될 것이다.
사용자가 화면에 UI가 업데이트되는 것을 보기까지 오랜 시간이 걸려 좋지 않은 사용자 경험이 될 수 있다.
 
2.매 렌더링마다 Side Effect가 수행된다.
리액트에서 함수 컴포넌트의 리렌더링은 함수 컴포넌트를 다시 호출하는 방식으로 실행된다.
특정 상황에서만 필요한 side effect가 매 렌더링마다 계속 발생하게 되는 것은 비효율적이다.
 
 
 

그렇다면 Side Effect 가 올바른 시점에서 동작한다는 건?

1. 렌더링이 모두 완료되고 난 후 side effect 가 실행된다.
side effect 가 마지막으로 실행된다면 화면 UI가 렌더링 되는 시간이 느려지지 않을 것이다.
 
2. side effect를 원할 때만 조건을 걸어 실행할 수 있어야 한다.
매번 렌더링될 때마다 side effect가 원하지 않은 상황에서 같이 실행되는 것을 막아 더 효율적일 것이다.
 

 

✅ 이러한 조건들을 충족 시키는 게 useEffect라는 hook 이다.

 

useEffect(() => {콜백함수}, [의존성배열])

useEffect 를 쓸 때는 콜백함수와, 의존성 배열을 같이 써준다.
 
콜백함수는 어떤 동작을 하는 함수를 인자로 받는데, 사이드 이팩트가 발생할 때 어떤 걸 실행시킬지 담는다.
콜백함수의 역할은 다른 UI들이 먼저 렌더링되고 useEffect 함수를 맨 나중에 실행한다.
 
콜백함수를 써줄 때 화면 blocking 을 막을 수 있지만,
필요하지 않을 때에도 변하는 값이 있을 때마다 같이 실행된다는 문제점이 남는다.
 
이 문제를 해결하기 위해 같이 써주는 것이 의존성 배열이다.
의존성 배열에 들어가는 값은 '이전 렌더링과 비교했을 때 동일한가?' 를 검사한다.
첫 번째 렌더링에서는 무조건 콜백함수를 호출하지만
두 번째 렌더링부터는 의존성 배열의 값이 변했으면 콜백함수를 호출하고 변하지 않으면 콜백함수를 호출하지 않는다.
((((만약 빈 배열 [ ] 을 써준다면 맨 처음 한 번만 실행되고 그 이후론 실행되지 않는다.))))
 
 
 
 

📌 코드로  useEffect( ) 렌더링 사이클 알아보기

아래 연습을 통해 알아보려고 한다.

import React, { useEffect, useState } from "react";

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState("");

  useEffect(() => {
    console.log("1");
  }, [count, text]);
  //count와 text가 변할 때 이 콜백함수 호출
  
  useEffect(() => {console.log("2");
  }[]);
  //빈 배열을 넣어주면 변화를 감지하지 못하고 렌더링 되지 않을 것

  console.log("3");
  
  return (
    <div>
      <div className="wrapper">
        <h1>Count: {count}</h1>
        <button onClick={() => setCount(count + 1)}>Up</button>
      </div>
      <input value={text} onChange={(e) => setText(e.target.value)} />
    </div>
  );
}

export default App;

 
여기서 문제!

Q. 먼저 App이라는 컴포넌트에 해당하는 UI 가 렌더링될 때  어떤 순서로 렌더링이 될까?

 

1번

useEffect(() => {
    console.log("2");
  }, [count, text]);

 

2번

useEffect(() => {console.log("3");
  }[]);

 

3번

console.log("1");

 

Answer

처음에 화면 진입 시

모든 UI가 다 렌더링되지만 useEffect가 쓰인 함수는 마지막으로 실행되기 때문에
3 -> 1 -> 2 순서로 찍힌다.
 

버튼 클릭 시 또는 Input 에 텍스트 입력 시

빈 배열을 의존성 배열로 넣어준 2번은 해당하지 않고,
3번과 클릭이나 input 변화를 감지하는 1번은 화면에 실행 된다.
3 -> 1

 

 

useEffect 썼을 때 Rendering Cycle

1️⃣ 컴포넌트가 처음 렌더링된다. mount
2️⃣ useEffect에서 콜백함수 호출한다. side effect
3️⃣ 컴포넌트의 state/ props 가 변경될 경우 리렌더링된다. update
4️⃣ useEffect에서 의존성 배열 확인해서 만약 이전 렌더링과 비교했을 때 변화된 값이 있으면 콜백함수 호출 side effect
5️⃣ state/ propd 가 변경되면 3번과 4번과정 반복한다.
6️⃣ 컴포넌트가 더 이상 필요 없어지면 화면에서 사라진다.unmount
 
 
 
지금까지 useEffect를 알아보았다. 
내 작업물에는 useEffect 가 적용될지 궁금하기도 하고 아직까진 두렵기도 하다. 
빨리 익숙해졌으면ㅎㅎ