React - useEffect

📍 useEffect 📍

어떠한 값이 변경 될 때 마다 특정 코드를 실행하는 React Hook.

🌟 React Life Cycle 🌟

1.Mount

• 컴포넌트가 페이지에 처음 렌더링 될 때

---

2.Update

• State 나 Props의 값이 바뀌거나, 부모 컴포넌트가 리렌더링 되어, 자신도 리렌더링 될 때

---

3.UnMount

• 더 이상 페이지에 컴포넌트가 렌더링 되지 않을 때

---

2.📍 useEffect 의 사용법 📍

useEffect (callback, [ deps ])
첫번째 매개변수 : 콜백함수
두번째 매개변수 : 의존성 배열 (deps)

• useEffect 는 의존성 배열의 값이 변경되면 첫 번째 인수로 전달한 콜백 함수를 실행한다.
• 의존성 배열에 아무것도 전달하지 않으면 useEffect 는 컴포넌트를 렌더링할 때 마다 콜백함수를 실행한다.
• useEffect 는 컴포넌트가 외부 시스템과 동기화를 유지할 수 있도록 하고,
  외부 시스템은 React 에 의해 컨트롤 되지 않은 모든 코드를 의미한다.

setInterval()에 의해 관리되는 타이머 또는 clearInterval().
window.addEventListener()을 이용한 이벤트 구독 또는 window.removeEventListener().
animation.start()와 같은 서드 파티 애니메이션 라이브러리 API 또는 animation.reset().

+ cleanup

리액트 컴포넌트의 언마운트 시점을 제어하기 위해 사용된다.
프로그래밍에서 이 개념은 특정 함수가 시랳오디고 종료된 후에, 미처 정리하지 못한 사항을 처리하는 일.

code )

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(1);
  const [name, setName] = useState;
  const handleCountUpdate = () => {
    setCount(count + 1);
  };
  const handleInputChange = (e) => {
    setName(e.target.value);
  };
  // 마운트 될때, 
  useEffect(() => {
    console.log("useEffect");
  }, [count]);

  useEffect (() => {
    
  }, [])
  return (
    <div>
      <button onClick={handleCountUpdate}>Update</button>
      <span> count : {count}</span>
      <input type="text" value={name} onChange={handleInputChange} />
      <span> name : {name} </span>
    </div>
  );
}

export default App;