TIL: useEffect

언제 사용할까?

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 React Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶을때, 또는 어떤 컴포넌트가 화면에서 사라졌을  때 무언가를 실행하고 싶을 때, useEffect를 사용한다.

 

//App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
		// 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

브라우저에서 App컴포넌트를 눈으로 보는 순간, App 컴포넌트가 화면에 렌더링 될 때 useEffect 안에있는 console.log가 실행된다.

컴포넌트가 렌더링 될 때 실행된다. 이게 핵심 기능.

 

input이 있고 state를 useState로 관리하는 경우,

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

const App = () => {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log("hello useEffect");
  });

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

이렇게 구현하고 브라우저의 input에 어떤 값을 입력하면 useEffect가 계속 실행됨.

이유는, 

1. input에 값을 입력

2. value, 즉 state가 변경됨,

3. state가 변경되어서 App 컴포넌트가 리렌더링 된다.

4. 리렌더링 되어서 useEffect가 다시 실행.

5. 1-5번 과정 계속 순환.

이런 부분을 해결하기 위해서는 의존성 배열의 사용이 필요하다.

 

의존성 배열

1. useEffect에 의존성 배열이라는 것이 있다. "이 배열에 값을 넣으면 그 값이 바뀔 때 useEffect를 실행한다"는 뜻.

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

2. 코드로 보는 의존성 배열 -> 의존성 배열이 빈 배열인 경우

// src/App.js

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

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, []); // 비어있는 의존성 배열

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

이 코드의 의존성 배열에는 어떤 값도 넣지 않았다.  아무것도 넣지 않았을 땐 useEffect는 처음에 딱 한번만 실행되고 그 이후엔 어떤 일이 일어나도 실행 되면 안된다. 따라서 더이상 value에 값이 들어와도 useEffect가 실행되지 않음.

useEffect를 사용하는데 어떤 함수를 컴포넌트가 렌더링 될 때 단 한 번만 실행하고 싶으면 의존성 배열을 [] 빈 상태로 넣으면 된다.

 

3. 의존성 배열에 값이 있는 경우

빈 배열을 넣었을 때, 최초 렌더링 이후에는 useEffect가 실행되진 않는다. 만약 의존성 배열에 value를 넣으면? 

input을 입력 할 때마다 useEffect가 실행 된다.

// src/App.js

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

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, [value]); // value를 넣음

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

strict mode라는 개발 환경에서 작업을 하게되면 useEffect가 콘솔에 두번 찍히는 것을 볼 수 있다. 이것 때문에 작업에 영향이 있다면 index.js에서 strict mode를 주석처리 해주자.

 

strict mode란?

애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구. strict mode는 개발 모드에서만 활성화 되어 프로덕션 빌드에는 영향을 끼치지 않음.

• 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
• 레거시 문자열 ref 사용에 대한 경고
• 권장되지 않는 findDOMNode 사용에 대한 경고
• 예상치 못한 부작용 검사
• 레거시 context API 검사
• Ensuring reusable state

이런 부분에서 도움이 됨

 

Reference

https://ko.reactjs.org/docs/strict-mode.html

Strict 모드 – React

 

clean up

속세를 벗어나는 버튼을 만들고 버튼을 누르면 useNavigate에 의해 /todos로 이동하면서 속세 컴포넌트를 떠난다. 그러면 화면에서 속세 컴포넌트가 사라지고, useEffect의 return 부분이 실행됨.

// src/SokSae.js

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const 속세 = () => {
  const nav = useNavigate();

  useEffect(() => {
    return () => {
      console.log(
        "안녕히 계세요 여러분! 전 이 세상의 모든 굴레와 속박을 벗어 던지고 제 행복을 찾아 떠납니다! 여러분도 행복하세요~~!"
      );
    };
  }, []);

  return (
    <button
      onClick={() => {
        nav("/todos");
      }}
    >
      속세를 벗어나는 버튼
    </button>
  );
};

export default 속세;

정리

useEffect는 화면에 컴포넌트가 unmount 또는 unmount되었을  때 실행하고자 하는 함수를 제어하게 해주는 훅이다.

의존성 배열을 통해 함수의 실행 조건을 제어할 수 있다.

useEffect에서 함수를 1번만 실행시키고자 할때는 의존성 배열을 빈 배열로 둔다.

 

Reference 

teamsparta notion에서 발췌한 내용입니다.

https://teamsparta.notion.site/03-React-Hooks-useEffect-f8a36a8c70614fd0a804343bac95e812

03. React Hooks (useEffect)