React

메모

메모를 사용하면 React가 구성 요소를 변경하지 않은 경우 구성 요소 렌더링을 생략할 수 있다.

성능을 향상시킬 수 있다.

⭐ 이 섹션에서는 React 후크를 사용한다.

문제

Todos할 일이 변경되지 않은 경우에도 구성 요소가 다시 렌더링된다.

예제 – index.js

import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState(["todo 1", "todo 2"]);

  const increment = () => {
    setCount((c) => c + 1);
  };

  return (
    <>
      <Todos todos={todos} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

예제 – Todos.js

const Todos = ({ todos }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
    </>
  );
};

export default Todos;

증가 버튼을 클릭하면 Todos구성 요소가 다시 렌더링된다.

이 구성 요소가 복잡하면 성능 문제가 발생할 수 있다.

해결책

이를 해결하기 위해 memo를 사용할 수 있습니다.

Todos 구성 요소가 불필요하게 다시 렌더링되지 않도록 memo를 사용한다.

Todos 구성 요소 내보내기를 memo로 감싼다.

예제 – index.js

import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState(["todo 1", "todo 2"]);

  const increment = () => {
    setCount((c) => c + 1);
  };

  return (
    <>
      <Todos todos={todos} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

예제 – Todos.js

import { memo } from "react";

const Todos = ({ todos }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
    </>
  );
};

export default memo(Todos);

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기