[노마드코더] 리액트 작동원리 & useEffect

리액트는 간단하게 작동한다

 

state를 변화시킬때 component를 재실행시키는것이다.(모든 코드가 재실행)

 

UI관점에서 보면, 새로운 데이터가 들어올때마다 자동으로 새로고침되니 좋은 일이긴한데, 

 

이때 모든 component를 재실행시키면 비효율적이니까 

그리고 계속 실행되면 안되는 코드도 있을수 있고, 

 

여기서 useEffect가 나온거다. (useEffect 사용이유) 

 

의존성배열에 따라서 또 실행이 안되고 되는걸 만든거다.

 

---

참고할 코드

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);
  console.log("i run all the time");
 
  useEffect(() => {
    console.log("I run only one");
  }, []);

  useEffect(() => {
    if (keyword !== "" && keyword.length > 5 && keyword.length < 10) {
      console.log("SEARCH FOR", keyword);
    }
  }, [keyword]);

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

export default App;