📝 오늘 한 것

1. React.useEffect()

📚 배운 것

1. EFFECTS

1) useEffect

(1) 코드 실행 시점 문제

기본적으로 state가 변할 때마다 App 컴포넌트 내의 모든 코드가 반복 실행된다.

그러나 App 컴포넌트의 일부 코드는 App 컴포넌트가 처음 렌더링될 때만 실행되도록 하고, 이후에 state가 변할 때는 실행되지 않도록 할 필요가 있다. ex) API 호출

import { useState } from "react";

function App() {
  const [counter, setValue] = useState(0);
  const onClick = () => setValue((prev) => prev + 1);
  console.log("call an api"); // state가 바뀔 때마다 콘솔에 찍힌다
  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

(2) useEffect([실행하려는 코드], [지켜볼 state])

useEffect()는 2개의 인자를 받는다.
첫 번째 인자는 기본적으로 컴포넌트 렌더링 시 한 번만 실행될 코드이다.

import { useEffect, useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const onClick = () => setCounter((prev) => prev + 1);

  console.log("항상 실행되는 코드");
  useEffect(() => console.log("call the api..."), []);

  return (
    <div>
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

두 번째 인자는 변화를 지켜볼 state를 아이템으로 가지는 배열을 받는다.
React가 해당 state를 지켜보다가 그 state가 변경됐을 때에도 첫 번째 인자로 받은 코드를 실행한다.

import { useEffect, useState } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");

  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (event) => setKeyword(event.target.value);

  console.log("항상 실행되는 코드"); // 항상 실행
  useEffect(() => console.log("API 호출..."), []); // 컴포넌트 처음 렌더링 시 한 번만 실행
  useEffect(() => console.log(keyword, "검색"), [keyword]); // 〃 + keword state 변경될 때마다 실행

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="여기서 검색..."
      />
      <h1 className={styles.title}>{counter}</h1>
      <button onClick={onClick}>클릭</button>
    </div>
  );
}

export default App;

다만 현재는 input에 keyword를 입력하지 않아도 컴포넌트가 처음 렌더링될 때 무조건 검색을 하기 때문에 keyword가 입력됐을 때만 검색하도록 수정했다.

useEffect(() => {
  if (keyword !== "" && keyword.length > 5) {
    console.log(keyword, "검색");
  }
}, [keyword]);

💡 useEffect() VS memo()

• useEffect() : 동일 컴포넌트에서 state가 변했을 때 일부 코드가 실행되지 않도록 한다.

• memo() : 부모 컴포넌트에서 state가 변했을 때 그것이 자식 컴포넌트의 prop과 연결되어 있지 않으면 부모 컴포넌트의 state가 변해도 자식 컴포넌트는 리렌더링 되지 않도록 한다.

(3) cleanup function

다음 코드에 따르면, 버튼을 누를 때마다 showing의 값이 변하면서 Hello 컴포넌트가 재생성된다.
따라서, 그때마다(즉, showing의 값이 true가 될 때마다) Hello 컴포넌트의 useEffect() 안의 코드가 실행된다.

import { useEffect, useState } from "react";

function Hello() {
  useEffect(() => console.log("Hello 컴포넌트 리렌더링"));
  return <h1>안녕</h1>;
}

function App() {
  const [showing, setShowing] = useState(false);
  const onClick = () => setShowing((prev) => !prev);

  return (
    <div>
      {showing ? <Hello /> : null}
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
    </div>
  );
}

export default App;

그런데 컴포넌트가 생성될 때뿐 아니라 파괴될 때도 특정 코드를 실행하도록 할 수 있다.
이를 위해 useEffect에 의해 실행될 함수(콜백 함수)가 cleanup function을 return 하도록 해야 한다.
cleanup function이란 컴포넌트가 파괴될 때 실행될 코드를 담은 함수를 말한다.

function Hello() {
  // cleanup function(컴포넌트가 파괴될 때 실행될 코드를 담은 함수)
  const byFn = () => console.log("컴포넌트 파괴");

  // useEffect에 의해 실행될 함수(콜백 함수)
  const hiFn = () => {
    console.log("컴포넌트 생성");
    return byFn;
  };

  useEffect(hiFn, []);

  return <h1>안녕</h1>;
}

한편, 위 코드가 이해하기는 쉽지만 보통은 따로 함수를 빼지 않고 useEffect() 안에 모든 코드를 작성한다.

function Hello() {
  useEffect(() => {
    console.log("컴포넌트 재생성");
    return () => console.log("컴포넌트 파괴");
  }, []);

  return <h1>안녕</h1>;
}

💡 useEffect()를 사용하면 컴포넌트가 생성될 때, state가 변화할 때, 컴포넌트가 파괴될 때 모두 특정 코드를 실행할 수 있다. 즉, 특정 코드의 실행 시점을 설정할 수 있다.

✨ 내일 할 것

1. PRACTICE MOVIE APP