useEffect

useEffect는 ⭐리액트 컴포넌트가 렌더링될 때마다⭐ 특정 작업을 수행하도록 설정할 수 있는 hook.
어떤 컴포넌트가 화면에 보여지거나 사라졌을 때 내가 무언가를 실행하고 싶다면? useEffect 사용.
리액트에서 제공하는 훅이기 때문에 import React, { useEffect } from "react"; 로 import해서 사용한다.

주의할 점

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;

1. input에 값 입력한다.
2. value값 즉, state가 변경된다.
3. state가 변경되었기 때문에 App 컴포넌트가 리렌더링된다.
4. 리렌더링 되었기 때문에 useEffect가 다시 실행된다.
5. 위 과정 계속 반복~

이를 방지하고자 나온 개념이 바로 의존성 배열이다!

의존성 배열

이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다.

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

의존성 배열을 추가하되 배열 안의 값이 비어있으면?

useEffect(()=>{
}, [])

useEffect는 처음에 딱 한번만 실행되고 그 이후로는 절대 실행되지 않는다.
-> 어떤 함수를 컴포넌트가 렌더링될 때 단 한번만 실행하고 싶다면 의존성 배열을 빈 상태로 두면 된다.

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

해당 값의 상태가 바뀔 때마다 useEffect가 계속 실행된다.

클린 업

어떤 컴포넌트가 화면에서 사라졌을 때 실행하고자 하는 것.
useEffect 안에서 return을 해주고 이 부분에 실행되길 원하는 함수를 넣는다.

import React, { useEffect } from "react";

const App = () => {

	useEffect(()=>{
		// 화면에 컴포넌트가 나타났을(mount) 때 실행하고자 하는 함수를 넣어주세요.

		return ()=>{
			// 화면에서 컴포넌트가 사라졌을(unmount) 때 실행하고자 하는 함수를 넣어주세요.
		}
	}, [])
  
  

	return <div>hello react!</div>
};

export default App;