useEffect란 무엇이고 어떻게 사용하는 걸까?

리액트를 사용하려면 useEffect라는 훅에 대해 꼭 알아야합니다.

 useEffect 훅이란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다.

 

즉, 렌더링될 때 특정작업을 실행시키고 싶을 때 useEffect를 사용하는데요. 대표적인 예로는 렌더링될 때 api호출을 다시해야하는 경우가 있겠습니다.

 

선언방법은 다음과 같습니다.

첫번째 인자는 ()=>{}로 보이는 콜백 함수이며, 두번째 인자는 배열입니다.

배열안엔 보통 변견되는 상태(useState)값을 넣으며 그 값이 변할 경우 콜백함수에 있는 기능을 실행하게 됩니다.

 

위 사진처럼 빈칸일 경우 처음 렌더링되는 경우만 콜백함수안의 기능을 실행하게 됩니다.

 

말로 설명하면 헷갈리니 코드로 보여드리겠습니다.

다음과 같이 코드를 작성했습니다.

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

function App() {
  const [name, setName] = useState("");

  const changeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  console.log("컴포넌트 리렌더링!");

  useEffect(() => {
    console.log("useEffect 내부가 실행되었습니다.");
  }, []);

  return (
    <>
      <input type="text" onChange={changeName} />
    </>
  );
}

export default App;

 

코드를 설명하자면 name을 저장하는 useState를 선언하고 input박스에서 이 name값을 변경해줍니다.

그리고 변경될 때마다 useState로 인해 렌더링이 진행되죠

처음 웹 앱을 실행하면 첫렌더링으로 인해 두개의 console.log가 잘 실행되었음을 확인할 수 있습니다.

input박스안에 값을 변경 ('' => '123')됨에 따라 렌더링이 글자수 만큼 일어나게 됩니다.

때문에 '컴포넌트 리렌더링!'라는 log를 3번 출력하게 됩니다.

 

하지만 useEffect안에 있는 console.log는 출력하지 않는 것을 확인할 수 있습니다.

 

위에서 말씀드린 것과 같이 첫렌더링 때 한 번 실행되기 때문입니다.

 

 

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

function App() {
  const [name, setName] = useState("");
  const [clickBtn, setClickBtn] = useState(false);

  const changeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  const clickButton = () => {
    setClickBtn((value) => !value);
  };

  console.log("컴포넌트 리렌더링!");

  useEffect(() => {
    console.log("useEffect 내부가 실행되었습니다.");
  }, [clickBtn]);

  return (
    <>
      <input type="text" onChange={changeName} />
      <button onClick={clickButton}>{`버튼`}</button>
    </>
  );
}

export default App;

이번엔 코드에 버튼 기능을 추가했습니다.

단순히 버튼을 클릭하면 clickBtn이 바뀌도록 만들었고 이 변수를 useEffect의 두번째 인자로 넣었습니다.

 

위 결과는 다음과 같이 실행됐습니다.

첫째줄, 둘째줄 : 컴포넌트가 처음 렌더링 됐을 때 실행됩니다.

셋째줄, input박스안의 값이 변경되어(''->'123') 세번 실행됩니다.(변경된 횟수 만큼)

넷째줄, 다섯번째줄 : 버튼을 클릭한 후 렌더링이 진행되어 useEffect내부의 console.log와 함께 두개의 로그가 출력됩니다.

 

 

useEffect는 조건에 맞춰 기능을 실행한다는 것을 확인할 수 있습니다.

위의 경우는 clickBtn의 값이 false -> true로 변하는 조건에 맞춰 기능을 실행했습니다.

또, clickBtn이 변경되지 않았을 땐 기능이 실행되지 않았음을 확인할 수 있습니다.

 

다음 글에선 useEffect의 return값에 대해 확인해보도록 하겠습니다.