[React] 8일차: 코드의 재사용과 최적화 (Custom Hooks & Memoization)

이번 내용은 기초를 넘어 커스텀 훅(Custom Hooks)이나 성능 최적화(useMemo, useCallback) 등 중급 단계로 넘어가는 중요한 지점입니다.

 

 

리액트의 기초적인 Props와 State, 그리고 Effect를 넘어 오늘은 더 효율적인 코드를 작성하기 위한 내용입니다.

1. Custom Hooks (나만의 훅 만들기)

여러 컴포넌트에서 반복되는 로직(예: input 핸들링, API 호출, 스크롤 감지 등)을 하나의 함수로 분리하여 재사용하는 방법입니다.

• 특징: 이름이 반드시 use로 시작해야 합니다.
• 장점: 로직이 분리되어 컴포넌트 코드가 간결해지고, 유지보수가 쉬워집니다.

JavaScript

 

// useInput.js (예시)
import { useState } from 'react';

function useInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = (e) => setValue(e.target.value);
  return [value, onChange];
}

2. useMemo & useCallback (메모이제이션)

리액트 컴포넌트는 상태가 변할 때마다 리렌더링됩니다. 이때 불필요한 계산이나 함수 생성을 방지하기 위해 사용합니다.

• useMemo: 연산된 값을 재사용할 때 사용합니다. (비싼 연산 방지)
• useCallback: 함수 자체를 재사용할 때 사용합니다. (자식 컴포넌트의 불필요한 리렌더링 방지)

3. React.memo

컴포넌트의 Props가 변경되지 않았다면 리렌더링을 건너뛰도록 하는 고차 컴포넌트(HOC)입니다.

---

💡 오늘의 핵심 요약

1. 로직의 공유: 동일한 함수형 로직이 반복된다면 Custom Hook을 고려하자.
2. 무분별한 최적화 금지: useMemo나 useCallback은 메모리를 사용하므로, 정말 성능 저하가 우려되는 곳에만 전략적으로 사용하자.
3. 가독성: 커스텀 훅을 쓰면 UI 로직과 비즈니스 로직이 분리되어 코드가 훨씬 읽기 좋아진다.

Copyright 2026. [Ryon] all rights reserved.