05. useEffect

 

useEffect function은 코드가 한번만 실행될 수 있도록 보호해주는 것이다.

 

useEffect(함수, [변수]);

위의 형태로 사용되는데 변수 값이 변화면 함수 내 코드가 작동한다!!!

import logo from './logo.svg';
//import './App.css';

//import Button from "./Button";
//import styles from "./App.module.css";
import { useEffect, useState } from 'react';

function App() {

  const [counter, setValue] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => {
    setValue((prev) => prev + 1);
  };
  const onChange = (event) => {
    setKeyword(event.target.value);
  };

  console.log("I run all the time");

  /*
    ************** useEffect function은 코드가 딱 한번만 실행될 수 있도록 보호해준다. **************
  */
  useEffect(() => { 
    console.log("I run only once.");
  }, []);
  
  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]); //keyword 값이 변경될때만 실행된다.

  useEffect(() => {
    console.log("I run when 'counter' changes.");
  }, [counter]); //counter 값이 변경될때만 실행된다.

  useEffect(() => {
    console.log("I run when 'keyword' & 'counter' changes.");
  }, [keyword, counter]); //keyword,counter 값이 변경될때만 실행된다.

  /*
    ********************************************************************************************
  */
  
  return (
    <div>
      <input value={keyword} onChange={onChange} type = "text" placeholder='Search here...'/>
      <h1>{counter}</h1>
      <button onClick = {onClick}>Click me</button>
    </div>
  );
}

export default App;

 

 

 

 

react-for-beginners.z01

19.53MB

react-for-beginners.z02

19.53MB

react-for-beginners.z03

19.53MB

react-for-beginners.z04

19.53MB

react-for-beginners.zip

6.24MB