0606

공부내용 한줄 요약
useEffect()로 특정 코드가 실행될 조건을 정의할 수 있다.

useEffect(실행될 code, [state])
특정한 state가 변했을 때 code가 실행된다. 공란이면 컴포넌트 로딩 시 1회만 실행. [state]자리 정식명칭은 dependencies

* create-react-app을 사용하기 때문에 import { useState, useEffect } from "react"; 해오는 대신 React.useState() -> useState()로 생략한다.

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(() => {
    if (counter !== 0 && keyword !== "") {
      console.log("I run when 'counter' & 'keyword' changes.");
    }
  }, [counter, 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;

Comment
데이터가 변화할 때마다 자동으로 re-rendering되는 것이 react의 장점이나, 코드에 따라 제어가 필요할 수 있다. useEffect()로 이를 제어할 수 있다.