[React] React Hooks - useEffect

 

 

useEffect는 리액트 컴포넌트가 렌더링될 때마다 작업 수행하도록 설정하는 hook

 

useEffect 불러오기

import React, {useEffect} from "react";

 

useEffect 불러와서 실행시킬 수 있다

---

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

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, [value]);

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

 

---

코드 파헤치기

useEffect(() => {
	console.log("hello useEffect");
}, [value]);

• value에 들어가는 것이 실행하고 싶은 함수( = 의존성배열 )
  
  • [] 빈값으로 둘시 한번만 실행
  • 의존성 배열 없이 실행시 항상 실행
• value에 들어가는 값이 변할 때만 실행한다

---

중요한 포인트!

- useEffect는 컴포넌트가 실행 또는 종료 됐을 때 실행하고자 하는 함수를 제어해주는 훅
- 의존성 배열 통해 함수의 실행 조건 제어 가능
- useEffect에서 함수를 1번만 실행하고자 할 땐 의존성 배열을 빈 배열로