useEffect에 대하여

개요

useEffect 함수는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 실행할 수 있도록 하는 Hook

useEffect는 컴포넌트가 마운트 됐을 때, 혹은 언마운트되거나 업데이트 됐을 때, 특정 작업을 처리

즉, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 사용가능

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

useEffect

1. 페이지가 처음 렌더링 되고 난 후 useEffect는 무조건 한 번 실행

2. useEffect에 배열로 지정한 useState의 값이 변경 되면 실행된다.

   1. useEffect는 렌더링 혹은 변수값 혹은 오브젝트가 달라지면 업데이트를 해주는 함수
   2. useEffect는 callback함수를 부른다

파라미터

1. effect 함수

   1. 렌더링 이후 실행할 함수 (리액트는 이 함수를 기억했다가 DOM 업데이트 후 불러낸다.
   2. effect함수에서 함수를 return 할 경우 그 함수가 컴포넌트가 Unmount 될 때 정리의 개념으로 한 번 실행된다.

2. deps

   1. 특정한 값이 변경될 때, effect함수를 실행하고 싶을 경우 배열안에 그 값을 넣어준다.
   2. 빈 배열을 입력할 경우 컴포넌트가 Mount 될 때만 실행

사용법

useEffect(() ⇒ {} ) ;

기본 적인 용법 : dependency가 없기 때문에 렌더링 할때 한 번 실행되고, 요소 변화마다 useEffect가 발동되어 불필요한 실행이 많아진다.

useEffect를 렌더링 후 단 한번만 실행하고 싶을 때 사용하는 방법: 콜백 함수 뒤에 배열을 나타내는 대괄호에 빈 배열을 준다

useEffect를 렌더링 후 한번 그리고 배열 안 변수의 값이 변할 때마다 실행: Dependency를 지정해주어 지정된 변수의 값이 변했을 때만 실행

useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

자주 뜨는 에러

⇒ component 는 대문자로 생성