useEffect

기본 동작 원리

컴포넌트가 렌더딩될 때마다 실행

// src/App.js

import React, { useEffect } from "react";

const App = () => {

  useEffect(() => {
// 이 부분이 실행된다.
    console.log("hello useEffect");
  });

  return <div>Home</div>;
}

export default App;

 

의존성 배열

무한 렌더링을 방지해줌

의존성 배열이 빈 배열인 경우

처음 바뀔 때만 useEffect 실행

// src/App.js

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;

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

 

해당 값이 렌더링될 때마다 useEffect 실행

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

useEffect 메소드 외부의 값을 가져오려는 경우

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    .
    .
    .
    const url = props.url
  }, [props]); // props를 넣음

 

클린 업

다른 라우터로 이동하는 등 컴포넌트가 언마운되었을 때 useEffect 실행

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

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

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

export default App;

 

함수 실행시키기

  // ()() 사용
  
  useEffect(() => {
    ()();
  }, []);

예시)

  useEffect(() => {
    (async () => {
      const response = await fetch("https://api.coinpaprika.com/v1/coins");
      const json = await response.json();
      setCoins(json.slice(0, 100));
      setLoding(false);
    })();
  }, []);