[React] - 3차 - useEffect 사용 예

 

import './App.css';

import { useState, useEffect } from 'react';

function App() {

  const [num1, setNum1] = useState(0);

  const [num2, setNum2] = useState(0);

  useEffect(() => {

    console.log("num1 변경: "+num1)

  }, [num1])

  useEffect(() => {

    console.log("num2 변경: "+num2)

  }, [num2])

  useEffect(() => {

    console.log("num1 OR num2 변경: "+num1,num2)

  }, [num1, num2])

  useEffect(() => {

    console.log("처음 한번만 실행")

  }, [])

  const incre1 = () => {

    setNum1(num1+1);

  }

  const incre2 = () => {

    setNum2(num2+1);

  }

  return (

    <div className="App">

      <button onClick={incre1}>전송 {num1}</button>

      <button onClick={incre2}>전송 {num2}</button>

    </div>

  );

}

export default App;

useEffect를 사용한 예인데 아직 완벽하게 이해하지 못해서

이것을 어떻게 활용하는지 좀더 공부 해봐야겠다

함수 뒤에 , [ ]안에 값이 변경되면 실행할 변수를 입력하면 조절이 가능하고 빈값으로 두면 최초 한번만 실행한다