[React] useEffect 기본 사용법

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

export default 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("렌더링 됨!");
  });

  // 마운트 될때 + count 가 업데이트 됐을 때 실행되게 하자
  useEffect(()=>{
    console.log('카운트 변화');
  },[count])

  // 마운트 될때 + name 이 업데이트 됐을 때 실행되게 하자
  useEffect(()=>{
    console.log('네임 변화');
  },[name])

  useEffect(() => {
    console.log("마운트 될때 맨 처음만");
  }, []);

  return (
    <div className="App">
      <button onClick={handleCountUpdate}> update </button>
      <span>count : {count}</span>
      <input type="text" value={name} onChange={handleInputChange} />
      <span>name : {name}</span>
    </div>
  );
}

 

 

여기서 봐야 할것은 

 

1.  리렌더 될때마다 발생함

useEffect(( )=>{

})

여기서는 배열이 추가 되지 않았다.

렌더가 될때마다 실행되는 것이다..

 

 

2.  처음 렌더 될 때 한번만 실행된다

useEffect(( )=>{

}, [ ])

 

 

3. 배열안에 있는 값이 변할 때 마다 실행된다.

useEffect(( )=>{

}, [ㅁㅁㅁ])