🌟 메모이제이션이 뭔가요? (중학생용 설명)

• 메모이제이션은 "기억해두기"라고 생각하면 됩니다!
• 예를 들어, 수학 문제를 풀 때 이전에 계산했던 답을 노트에 적어두고 다시 사용하는 것과 비슷해요.
• 리액트에서는 이전에 계산한 결과나 그린 화면을 기억해뒀다가 다시 사용하여 더 빠르게 동작하게 만드는 거예요.

📚 React의 주요 메모이제이션 도구들

1. useMemo

   const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
   
   

   • 용도: 계산 비용이 많이 드는 값을 메모이제이션

   • 사용 시기:

     • 복잡한 계산이 필요할 때
     • 큰 배열이나 객체를 만들 때

   • 예시:

     function ProductList({ products, filterText }) {
       const filteredProducts = useMemo(() => {
         return products.filter(p => p.name.includes(filterText));
       }, [products, filterText]);
     
       return (
         <ul>
           {filteredProducts.map(product => (
             <li key={product.id}>{product.name}</li>
           ))}
         </ul>
       );
     }
     
     

2. useCallback

   const memoizedCallback = useCallback(
     () => {
       doSomething(a, b);
     },
     [a, b],
   );
   
   

   • 용도: 함수를 메모이제이션

   • 사용 시기:

     • 자식 컴포넌트에 함수를 props로 전달할 때
     • 함수가 의존성 배열에 포함될 때

   • 예시:

     function ParentComponent() {
       const [count, setCount] = useState(0);
     
       const handleClick = useCallback(() => {
         setCount(c => c + 1);
       }, []); // 의존성이 없으므로 함수가 절대 변경되지 않음
     
       return <ChildComponent onClick={handleClick} />;
     }
     
     

3. React.memo

   const MemoizedComponent = React.memo(function MyComponent(props) {
     // 컴포넌트 로직
   });
   
   

   • 용도: 컴포넌트 자체를 메모이제이션

   • 사용 시기:

     • 자주 리렌더링되는 큰 컴포넌트
     • props가 자주 바뀌지 않는 컴포넌트

   • 예시:

     const TodoItem = React.memo(function TodoItem({ todo, onToggle }) {
       return (
         <li>
           <input
             type="checkbox"
             checked={todo.completed}
             onChange={() => onToggle(todo.id)}
           />
           {todo.text}
         </li>
       );
     });
     
     

🎯 베스트 프랙티스

1. 성능 측정 후 사용하기

   // 좋은 예
   const heavyCalculation = useMemo(() => {
     return expensiveOperation(props.data); // 실제로 무거운 연산
   }, [props.data]);
   
   // 불필요한 예
   const simpleCalculation = useMemo(() => {
     return props.number + 1; // 단순 연산은 메모이제이션이 불필요
   }, [props.number]);
   
   

2. 의존성 배열 신중하게 사용

   // 좋은 예
   const memoizedFn = useCallback((id) => {
     console.log(`Item ${id} clicked`);
   }, []); // 빈 의존성 배열 - 함수가 절대 변경되지 않음
   
   // 주의가 필요한 예
   const memoizedFn = useCallback((id) => {
     console.log(`User ${user.name} clicked item ${id}`);
   }, [user]); // user 객체가 자주 변경된다면 메모이제이션의 이점이 줄어들 수 있음
   
   

🎓 중학생을 위한 실제 사례 설명

학교 급식 메뉴를 보여주는 앱을 만든다고 생각해볼까요?

function SchoolLunchApp() {
  const [menus, setMenus] = useState([]);
  const [searchText, setSearchText] = useState('');

  // 메뉴 필터링 - useMemo 사용
  const filteredMenus = useMemo(() => {
    console.log("메뉴 필터링 중...");
    return menus.filter(menu =>
      menu.name.includes(searchText)
    );
  }, [menus, searchText]);

  // 메뉴 클릭 처리 - useCallback 사용
  const handleMenuClick = useCallback((menuId) => {
    alert(`${menuId}번 메뉴를 선택했어요!`);
  }, []);

  return (
    <div>
      <input
        type="text"
        value={searchText}
        onChange={e => setSearchText(e.target.value)}
        placeholder="메뉴 검색하기"
      />
      <MenuList
        menus={filteredMenus}
        onMenuClick={handleMenuClick}
      />
    </div>
  );
}

// React.memo를 사용한 메뉴 목록 컴포넌트
const MenuList = React.memo(function MenuList({ menus, onMenuClick }) {
  return (
    <ul>
      {menus.map(menu => (
        <li key={menu.id} onClick={() => onMenuClick(menu.id)}>
          {menu.name}
        </li>
      ))}
    </ul>
  );
});

이 예제에서:

1. useMemo는 메뉴를 검색할 때 사용됩니다 (마치 급식 메뉴에서 원하는 음식을 찾는 것처럼!)
2. useCallback은 메뉴를 클릭했을 때의 동작을 기억합니다
3. React.memo는 메뉴 목록 전체를 기억해두었다가, 변경사항이 있을 때만 다시 그립니다

이렇게 메모이제이션을 사용하면 앱이 더 빠르고 효율적으로 동작하게 됩니다! 마치 수학 문제를 풀 때 계산기를 현명하게 사용하는 것처럼요! 😊