[TIL #29] 20240530

오늘은 개인과제 재제출과 과제6번이 같은 시간에 마감이라 최대한 집중했더니 간신히 끝냈다 허허

개인과제에 대한 해설이다.

---

Memoization

함수의 결과를 캐싱하여 동일한 입력에 대해 다시 계산하지 않도록 하는 최적화 기법

캐싱

자주 사용하는 데이터를 임시저장하고, 필요할때 빠르게 접근

1. 로컬스토리지처럼 데이터를 브라우저에 캐싱해두고, 계속 사용
2. 시험 준비를 할 때 중요한 내용을 노트에 정리하는 것처럼, 자주 사용하는 데이터를 저장해서 빠르게 접근

memo

컴포넌트 캐싱해서 리렌더링시 캐싱된 컴포넌트는 리렌더링 하지 않고 재사용

• 부모 컴포넌트 리렌더링 시 props 변화없는 자식 컴포넌트가 불필요하게 리렌더링되는 상황을 막아준다.

예시

memo 전

memo를 하지 않으면 이렇게 한단어를 입력할때마다 리렌더링이 된다.

const List = ({ items }) => {
  console.log("List component rendered");
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default List;

memo 후

이렇게 입력해도 리렌더링 방지되는걸 볼 수 있다.

import { memo } from "react";

const List = memo(({ items }) => {
 console.log("List component rendered");
 return (
   <ul>
     {items.map((item, index) => (
       <li key={index}>{item}</li>
     ))}
   </ul>
 );
});

export default List;

---

useMemo

계산결과값을 캐싱해서 리렌더링 시 재사용할 수 있는 훅

콘솔창에 Input을 타이핑 할때 마다 List 컴포넌트가 불필요하게 리렌더링 되는걸 확인할 수 있었다.

import React, { useState } from "react";
import List from "./components/List";

const App = () => {
  const [input, setInput] = useState("");
  const [items, setItems] = useState(["Item 1", "Item 2", "Item 3"]);

  const handleInputChange = (event) => {
    setInput(event.target.value);
  };

  const addItem = () => {
    setItems((prevItems) => [...prevItems, input]);
    setInput("");
  };

  const filteredItems = items.filter((item) =>
    item.toLocaleLowerCase().includes("item"),
  );

  return (
    <div>
      <h1>Item List</h1>
      <input type="text" value={input} onChange={handleInputChange} />
      <button onClick={addItem}>Add Item</button>
      <List items={filteredItems} />
    </div>
  );
};

export default App;

코드에서 return 문을 살펴보면, filteredItems가 실행되고 있는거 확인 가능하다.

그래서,

 const filteredItems = useMemo(() => {
    return items.filter((item) => item.toLocaleLowerCase().includes("item"));
  }, [items]);

useMemo를 써주면 AddItem 버튼을 누를때만 리렌더링되는 것을 볼 수 있다.