[REACT] Hooks(2) - useEffect

useEffect

 

React에서는 컴포넌트가 mount(화면에 나타남), unmount(화면에서 사라짐), 업데이트 될 때마다

실행되는 코드를 작성할 수가 있는데 이를 효율적으로 관리하기 위해 useEffect라는 hook을 제공한다.

 

예를 들어, 게시물을 보여주는 컴포넌트가 있다고 가정하였을 때 이 컴포넌트가 처음으로

mount될 때 게시물 데이터를 가져와서 화면에 보여주어야 하는데 이 때 useEffect를 사용하면

컴포넌트가 처음으로 mount될 때 게시물 데이터를 가져오는 코드를 실행할 수 있다.

 

또 다른 예로는, 사용자가 검색어를 입력했을 때 검색 결과를 가져오는 컴포넌트가 있다고 가정하자.

이 때, useEffect를 사용하면 검색어가 변경될 때마다 다른 검색 결과를 가져오는 코드를 실행할 수 있다.

 

useEffect 장점

 

useEffect를 사용하면 컴포넌트가 언제 어떤 상황에서 코드를 실행해야 하는지를

효율적으로 관리할 수 있다.

 

 

기본 문법

 

useEffect( ()=> {

    // 컴포넌트가 렌더링 되었을 때 실행할 함수
    console.log();
    
    // 컴포넌트가 unmount 되거나, 다음 useEffect 함수를 실행시 호출될 함수
    return () => {
    
    }
    
}, [ /* 배열 */ ]);

 

코드에서 알 수 있듯이, useEffect는 두개의 인자를 받는다.

첫 번째 인자는 함수 형태의 콜백 함수인데, 이 함수는 컴포넌트가 렌더링 될 때마다 실행된다.

두 번째 인자는 배열 형태의 의존성 배열이다. 이 배열에는 이펙트가 의존하는 값들을 나열한다.

 

만약, 이 배열에 들어있는 값이 변경되면 이펙트는 다시 실행된다.

빈 배열을 전달하면 이펙트는 한 번만 실행된다.

 

 

예제 코드1 - 컴포넌트가 처음 로드될 때, 초기화 작업을 하는 useEffect

 

import React, {	useEffect } from 'react';

export default function App() {

  useEffect(() => {
    console.log('Component is mounted');
  }, []);

  return (
    <>
    </>
  )
}

 

 

 

두 번째 인자인 배열의 값으로 빈 배열을 넣었더니, useEffect콜백 함수는 컴포넌트가 처음 로드 될 때

단 한번만 실행되는 것을 확인할 수 있다. (두 번 출력되는 것은React.StrictMode 때문입니다.)

 

예제 코드2 - 이벤트를 등록하고, 이벤트 핸들러를 제거하는 useEffect

 

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

export default function App() {
  const [count, setCount] = useState(0);

  useEffect( ()=> {

    document.addEventListener('click', counter);
    console.log("useEffect 실행");
    
    return () => {
      document.removeEventListener('click', counter);
    }

  }, []
  );

  const counter = () => {
    setCount(prevCount => prevCount + 1);
  }

  return (
    <div align="center">
      count : {count}
    </div>
  )
}

 

 

 

1번 예제와 같이 두 번째 인자 값으로 빈 배열을 넣었더니 한 번만 실행되는 것을 확인할 수 있다.

만약, 빈 배열이 아닌 count 라는 요소를 넣게 되면 어떻게 될까?

 

 

컴포넌트가 mount 됐을 때에 딱 한 번 실행되는게 아니라 count 요소의 값이 변경됨에 따라

계속해서 useEffect 함수가 실행됨을 확인할 수 있다.