[React, Next.js] useEffect라는 Hook을 사용해서 렌더링 후 코드실행

[React, Next.js] 렌더링 후 코드 실행을 위한 React Hook, useEffect라는 Hook을 사용해서 컴포넌트가 마운트 됐을 때 (처음 나타났을 때) 제어 코드

 

React 구성 요소가 렌더링된 후 일부 코드를 실행해야 할때 사용하는 코드이고 useEffect Hook은 다음과 같이 사용된다.

function HookComponent() {
  useEffect(() => {
    // 렌더링 이후 실행할 코드
  });

  return (
    <div>컴포넌트 HTML 구성부</div>
  );
}

위 코드는 렌더링 후(컴포넌트가 마운트 됐을 때, 처음 나타났을 때) L3 주석부분의 코드가 실행된다.

 

 

useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣는다.

만약에 deps 배열을 비우게 된다면, 컴포넌트가 처음 나타날때에만 useEffect 에 등록한 함수가 호출된다.

function HookComponent() {
  useEffect(() => {
    // 렌더링 이후 실행할 코드
  }, []);

  return (
    <div>컴포넌트 HTML 구성부</div>
  );
}

처음 나타났을 때만 L3 주석부분의 코드를 실행하고 싶다면 위 코드와 같이 deps 배열안에 아무것도 넣지 않으면 된다.