[React] Hooks(1) : useEffect

 

 

💡 리액트 훅들에 알아보자

 

💡 useEffect  : 렌더링 시 특정한 작업을 해야할 때 설정하는 훅

- 컴포넌트가 화면에 보여졌을 때

- 컴포넌트가 화면에서 사라졌을 때(return)

import "./App.css";
import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("hello"); {/*콘솔에 hello 출력*/}
  });

  return <>useEffect</>;
}

export default App;

 

화면이 렌더링될 때 콘솔에 값이 출력된다.

 

import "./App.css";
import { useEffect, useState } from "react";

function App() {
  const [value, setValue] = useState("");

  useEffect(() => {
    console.log("hello useEffect");
  });

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
          {/*input에 값이 입력되면 setValue가 바뀌며 리렌더링되고 useEffect가 실행된다.*/}
        }}
      />
    </div>
  );
}

export default App;

화면 실행됐을 때 콘솔이 한 번, 입력하면서 네 번 찍혔다.

 

 

👀 useEffect 의 실행을 조절해보자. 막아보자?

의존성 배열 활용 : 배열에 값을 넣으면 값이 바뀔 때만 useEffect 가 실행된다!

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

 

빈 배열을 넣어주면, 처음 화면 실행시에만 동작한다.

 

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

 

값을 넣어주니, input 에 값이 입력될 때 마다 동작한다.

 

 

👀 clean up : 값이 삭제될 때 실행 되는 return

위 value 에는 실행된 이후의 값이 출력되고,

아래 value 에는 실행 이전의 값이 출력된다.

 

➡️ 이전 값이 삭제되기 전 그 값을 반환하는 것이다.

❗️ return 값이 먼저 출력된다.

  useEffect(() => {
    console.log(`hello useEffect : ${value}`);

    return () => {
      console.log(`${value}`);
    };
  }, [value]);