[React] 노마드코더 ReactJs로 영화 웹 만들기 : #5 useEffect

 

 

💗 state를 변화시킬 때 component를 재실행시키는 것

 

<공식 문서>

https://react.dev/reference/react/useEffect

useEffect – React

 

 

useEffect

• useEffect는 두 개의 argument를 갖는 function
  • 우리가 실행시키고 싶은 코드
  • dependencies →react.js가 지켜보아야 하는 것
    • 그것이 변화할 때 코드 실행
• useEffect를 통해 우리는 언제 코드를 실행할 지 선택권을 가질 수 있음

1. 아무것도 지켜보지 않음. console.log("I run only once.") 한번만 실행됨

→처음 실행(렌더)시에 한번만 실행하고 다시는 실행 X

useEffect(()=>{
    console.log("I run only once.");
  },[]);

 

2. 한 개의 아이템만 지켜 봄 counter 변화시에만 실행

→시작할 때, counter 변화시에만 실행

useEffect(()=>{
    console.log("I run when 'counter' changes.");
  },[counter]);

 

 

3. 둘 중 하나가 실행될 때 코드 실행

→실행할 때, keyword 혹은 counter가 변화할때만 실행

useEffect(()=>{
    console.log("I run when 'keyword&counter' changes.");
  },[keyword,counter]);

 

 

 

- 예시 코드

import Button from "./Button"
import styles from "./App.module.css"

import { useState, useEffect } from "react";

function App() {
  const [counter,setValue]=useState(0);
  const onClick=()=>setValue((prev)=>prev+1);
  const onChange=()=>{}
  console.log('I run all the time')
  const iRunOnlyOnce=()=>{
    console.log('i run only once.')
  }
  
  // 특정 코드가 한번만 실행되게 하는 것
  // useEffect(iRunOnlyOnce,[])
  useEffect(()=>{
    console.log("Call the api...")
  },[])

  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

export default App;

import Button from "./Button"
import styles from "./App.module.css"

import { useState, useEffect } 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);
  useEffect(()=>{
    console.log("I run only once.");
  },[keyword]);
  useEffect(()=>{
    console.log("I run when 'keyword' changes.");
  },[]);
  useEffect(()=>{
    console.log("I run when 'counter' changes.");
  },[counter]);
  useEffect(()=>{
    console.log("I run when 'keyword&counter' changes.");
  },[keyword,counter]);
  // console.log('I run all the time')
  // const iRunOnlyOnce=()=>{
  //   console.log('i run only once.')
  // }
  // useEffect(iRunOnlyOnce,[])

  // useEffect(()=>{
  //   console.log("Call the api...")
  // },[]);
  // 특정 코드가 한번만 실행되게 하는 것

  // useEffect(()=>{
  //   if(keyword !==""&&keyword.length>5){
  //   console.log("SEARCH FOR", keyword)}
  // },[keyword])
  
  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;