[React] useEffect 개념

• React에서는 State가 변경될 때마다 컴포넌트 전체가 리렌더링되는데, 만약 State변경과 관계없이 딱 한 번만 렌더링되는 것을 원할 경우에는 어떡할까?

• 예를 들어 특정 API를 사용한다고 가정했을 때, 상태 변화가 있을 때마다 계속해서 리렌더링할 필요는 없을 것이다. 따라서 useEffect를 이용하여 특정 컴포넌트를 최초 한 번만 렌더링되도록 혹은 특정 상태 변화에만 렌더링되도록 만들 수 있다.

• useEffect는 2개의 인자(argument)를 갖는데, 1번째 인자에는 실행하려는 코드, 2번째 인자에는 상태 변경을 감지할 state를 넣는다.

1. 최초 한 번만 실행되도록 하기

import { useState, useEffect } from "react";
function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("I run all the time");
  useEffect(() => {
    console.log("CALL THE API...");
  }, []);
  // 콘솔창에 "CALL THE API" 메세지가 화면이 첫 렌더링될 때만 실행된다.
  return (
    <div>
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}
export default App;

2. 특정 State 변화에만 렌더링되게 하기

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 once.");
  }, []);
  // 두번째 인자를 비워두었기 때문에, "I run only once."는 화면이 첫 렌더링될 때만 실행된다.
  useEffect(() => {
    console.log("I run when 'keyword' changes.");
  }, [keyword]);
  // 두번째 인자로 [keyword]를 넣어줌으로써 keyword라는 state가 변화할 때만 위 코드를 실행.
  useEffect(() => {
    console.log("I run when 'counter' changes.");
  }, [counter]);
  // 두번째 인자로 [counter]를 넣어줌으로써 keyword라는 state가 변화할 때만 위 코드를 실행.
  useEffect(() => {
    console.log("I run when 'keyword' & 'counter' changes.");
  }, [keyword, counter]);
  // 두번째 인자로 [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;