DOTI Project

React에서 useState, useEffect 같은 기본 훅을 사용하다 보면, 반복되는 로직이 생기기 마련입니다. 이럴 때 커스텀 훅을 만들어 사용하면 코드의 재사용성과 구조화가 쉬워집니다.1. 커스텀 훅이란?커스텀 훅(Custom Hook)은 React의 기본 훅들을 조합해 만든 나만의 훅입니다. 보통 useSomething 형태로 네이밍하며, 공통 로직을 추출해 재사용할 수 있도록 돕습니다.2. 간단한 커스텀 훅 예제 – useToggle// useToggle.tsimport { useState, useCallback } from 'react';export function useToggle(initialValue: boolean = false): [boolean, () => void] { con..

React 앱을 개발하다 보면 컴포넌트가 불필요하게 렌더링되는 상황을 마주하게 됩니다. 이런 경우 useMemo와 useCallback 훅을 사용해 성능을 최적화할 수 있습니다.1. useMemo란?useMemo는 계산 비용이 높은 값을 메모이제이션하여, 의존성이 변경될 때만 다시 계산하도록 도와줍니다.import { useMemo } from 'react';const expensiveValue = useMemo(() => { return computeHeavyTask(input);}, [input]);위 코드에서 computeHeavyTask는 input이 바뀔 때만 실행되고, 그 외에는 캐시된 결과를 반환합니다.2. useCallback이란?useCallback은 함수를 메모이제이션하는 데 사용됩니..