nomad code_react js로 영화앱 만들기_#6.1 ~ 6.3

#useEffect

useEffect(() => {함수}, [조건]);

조건값이 변경될 때 마다 함수를 실행함

import { useState, useEffect } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev + 1);
  console.log("i run all the time");
  useEffect(() => {
    console.log("call api")
  }, []);
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default App;

console.log를 기준으로 보면, "i run all the time"은 state값이 변경될 때 마다 출력되지만  "call api"는 처음 로딩됐을 때 한번만 실행된다.

 

*콘솔이 2번씩 찍힌다면 index.js에서 React.StricMode를 삭제하면 된다.

 

import { useState, useEffect } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");
  const onClick = () => setCounter((prev) => prev + 1);
  console.log("i run all the time");
  useEffect(() => {
    console.log("call api")
  }, []);
  useEffect(() => {
    console.log("Search for", keyword);
  }, [keyword]);  
  return (
    <div>
      <input value={keyword} onChange={onChange} type="text" placehorder="Search here" />
      <h1>{counter}</h1>
      <button onClick={onClick}>Click me</button>
    </div>
  );
}

export default App;

i run all the time : state에 변화가 있을 때 마다 출력됨

call api : 조건없이 페이지가 로드됐을 때 딱 한번만 출력됨

Search for, keyword : 텍스트 input박스에 입력(변화)될 때 마다 출력됨

 

useEffect의 조건은 여러개 둘 수 있다. (or로 적용됨)

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