React.useEffect()

useEffect

React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 말합니다.
즉, 컴포넌트에서도 생명주기(life-cycle)를 사용할 수 있게 해주는 것
useState와 마찬가지로 여러번 사용할 수 있다.

useEffect(function, deps)

• function: 수행하고자 하는 작업

• deps: 배열의 형태이며, 배열 안에서 검사하고자 하는 특정 값 또는 빈 배열을 사용할 수 있다

1. deps 가 생략된 경우 : 리렌더링 될 때마다 useEffect 함수가 호출된다.

import React, { useEffect } from 'react';

useEffect(() => {
 console.log('렌더링 될 때마다 실행') 
})

2. deps 가 빈 배열인 경우 : 처음 렌더링 될때만 useEffect 함수가 호출된다.

useEffect(() => { 
  console.log('마운트 될 때만 실행'); 
}, []);

2. deps 가 특정 값인 경우 : 특정 값이 업데이트(변경)될 때만 useEffect 함수가 호출된다.

useEffect(() => { 
  console.log('특정 값이 업데이트 될 때만 실행'); 
}, [특정 값]);

useState 와 함께사용하기

컴포넌트 내부에서 useEffect를 작성함으로써
state 변수에 접근할 수 있다.

아래 예시는 렌더링 될때마다 useEffect가 작용한다

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `버튼클릭 ${count} 번 되었습니다!`;
  });

  return (
    <div>
      <p>버튼 클릭 : {count} 번</p>
      <button onClick={() => setCount(count + 1)}>
        클릭해주세요
      </button>
    </div>
  );
}

특정 state 가 변경될 때만 사용하기

아래 예시는 count 가 변경될 때에만 useEffect가 작용한다

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

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `버튼클릭 ${count} 번 되었습니다!`;
  },[count]);

  return (
    <div>
      <p>버튼 클릭 : {count} 번</p>
      <button onClick={() => setCount(count + 1)}>
        클릭해주세요
      </button>
    </div>
  );
}

useEffect 여러번 사용하기

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

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

  useEffect(() => {
    console.log("렌더링 될때마다 실행되는 함수");
  });

  useEffect(() => {
    console.log("처음 한 번만 실행되는 함수");
  }, []);

  useEffect(() => {
    console.log("카운트 값이 업데이트 될 때만 실행되는 함수");
  }, [count]);

  useEffect(() => {
    console.log("이름이 바뀌었을 때만 실행되는 함수");
  }, [name]);

  const handleAddCount = () => {
    setCount(count + 1);
  };

  const handleChangeName = () => {
    setName("윤정이");
  };
  return (
    <div>
      <button onClick={handleAddCount}>카운트증가</button>
      <button onClick={handleChangeName}>이름 바꾸기</button>
      <h1>{count}</h1>
      <h1>{name}</h1>
    </div>
  );
}

1. 페이지 첫 렌더링
   

2. 카운트 증가 할 때마다
   

3. 이름 바꾸기 클릭