React숙련주차04(React Hooks - useEffect)

🔴useEffect

🔴의존성 배열(dependency array)

🔴clean up

---

useEffect

💫useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

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

function App() {

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


  // 함수가 실행될때 렌더링 되는 useEffect
  // 그래서 input값이 입력될때마다 계속 console가 찍히는 것이다. 
  useEffect(() => {
    console.log("useEffect")

  });

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

export default App;

> input에 값이 입력

> value 즉, state가 변경

> state의 변경으로 App컴포넌트의 리렌더링 발생

> 리렌더링 -> useEffect()

> 위 과정의 반복진행

---

의존성 배열(dependency array)

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

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.

useEffect(()=>{
	// 실행하고 싶은 함수
               }, [의존성배열])

> 배열의 형태로 넣기

---

useEffect(() => {
  console.log("hello useEffect");
}, []); // 비어있는 의존성 배열

> 비어있는 의존성 배열을 넣어도 동작하는데 

> 해당 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행한다인데, 

> 아무것도 넣지 않았으니 useEffect는 처음에 딱 한번만 실행되고 그 이후로는 어떤일이 일어나도 실행이 되서는 안된다.

>> 어떤 값을 입력하던지, 변하던지 간에 의존성 배열에는 값이 없는 빈 배열 상태이기 때문에 어떤 값이 변해도 화면이 처음 로딩될때만 해당 로직이 동작한다.

---

// src/App.js

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

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

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

export default App;

> value의 값이 변할때만 useEffect를 실행한다.

> value값이 입력 시시때로 변하니까 계속 실행 될 것

 

useEffect 에서 함수를 1번만 실행시키고자 할때는 의존성 배열을 빈 배열로 둔다.

---

clean up

컴포넌트가 사라졌을 때 무언가를 실행

// src/App.js

import React, { useEffect } from "react";

const App = () => {

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

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

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

export default App;

---

// src/SokSae.js

import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const 속세 = () => {
  const nav = useNavigate();

  useEffect(() => {
    return () => {
      console.log(
        "안녕히 계세요 여러분! 전 이 세상의 모든 굴레와 속박을 벗어 던지고 제 행복을 찾아 떠납니다! 여러분도 행복하세요~~!"
      );
    };
  }, []);

  return (
    <button
      onClick={() => {
        nav("/todos");
      }}
    >
      속세를 벗어나는 버튼
    </button>
  );
};

export default 속세;

/ 에서 /todos 잘 이동했고, 그 과정에서 clean up이 실행