liminfo

React Reference

React 프레임워크 레퍼런스

27개 결과

React Reference 소개

React 레퍼런스는 TypeScript를 활용한 React 라이브러리를 위한 체계적이고 검색 가능한 치트 시트입니다. 컴포넌트, Hooks, 상태관리, 이벤트, JSX, 최적화 등 6개 핵심 카테고리로 구성되어 있으며, 각 항목에는 TypeScript 타입이 포함된 코드 예제가 있습니다. React를 모던하게 사용하는 개발자들이 훅 시그니처, 프롭 패턴, 성능 최적화 기법을 빠르게 확인할 수 있도록 구성되어 있습니다.

Hooks 섹션이 가장 충실하게 구성되어 있으며, 7가지 내장 훅을 모두 다룹니다: 함수형 업데이트 패턴을 포함한 `useState`, 정리 함수와 의존성 배열을 포함한 `useEffect`, DOM 참조와 리렌더링 없이 변경 가능한 값을 위한 `useRef`, 의존성이 변할 때만 재계산하는 `useMemo`, 안정적인 함수 참조를 위한 `useCallback`, prop drilling 없이 컨텍스트를 소비하는 `useContext`, 판별 유니온 액션 타입을 활용한 복잡한 상태 로직을 위한 `useReducer`. 재사용 가능한 상태 로직을 캡슐화하는 커스텀 훅 구축 방법도 포함합니다.

상태관리 섹션에서는 세 가지 방식을 다룹니다: 외부 라이브러리 없이 컴포넌트 트리에서 상태를 공유하는 Context API, 공통 부모를 통해 형제 컴포넌트 간 상태를 공유하는 상태 끌어올리기 패턴, 전역 상태를 위한 경량 외부 상태 관리자인 Zustand. 최적화 섹션에서는 `React.memo`, 코드 분할을 위한 `React.lazy`와 `Suspense`, UI 응답성을 유지하기 위한 `useTransition`, 효율적인 리스트 재조정을 위한 안정적인 `key` 프롭 사용법을 다룹니다.

주요 기능

  • 컴포넌트·Hooks·상태관리·이벤트·JSX·최적화 6개 카테고리 수록
  • 모든 내장 훅: useState, useEffect, useRef, useMemo, useCallback, useContext, useReducer
  • TypeScript 제네릭을 활용한 커스텀 훅 패턴(useLocalStorage 예제)
  • 상태관리: Context API(AuthProvider), 상태 끌어올리기, Zustand(store 생성)
  • 이벤트 처리: onClick/onChange/onSubmit, 타입 지정 이벤트 핸들러(ChangeEvent, FormEvent, KeyboardEvent)
  • JSX: Fragment(<>), spread props, 조건부 렌더링, key를 활용한 리스트 렌더링, dangerouslySetInnerHTML
  • 최적화: React.memo, lazy/Suspense 코드 분할, useTransition, 안정적인 key 프롭 패턴
  • 100% 클라이언트 사이드 처리 — 회원가입 불필요, 데이터 서버 전송 없음

자주 묻는 질문

useState와 useReducer의 차이는 무엇인가요?

`useState`는 독립적인 상태 조각(불리언 토글, 문자열 입력값, 단일 숫자)에 더 간단하고 적합합니다. `useReducer`는 상태 전환이 복잡하거나, 다음 상태가 이전 상태에 여러 방식으로 의존하거나, 함께 변경되는 여러 관련 상태 값이 있을 때 더 적합합니다. 타입 지정 `Action` 유니온을 사용한 `useReducer`는 Redux와 유사하지만 보일러플레이트 없이 상태 전환을 명시적이고 테스트 가능하게 만듭니다.

useCallback과 useMemo는 언제 사용해야 하나요?

`useCallback`은 함수를 메모이제이션하여 렌더링 간에 같은 참조를 유지합니다. `React.memo`로 래핑된 자식 컴포넌트에 콜백을 전달할 때 의미가 있습니다. `useCallback` 없이는 함수 참조가 매 렌더링마다 변경되어 자식이 불필요하게 리렌더링됩니다. `useMemo`는 의존성이 변할 때만 재계산해야 하는 비용이 큰 연산(대형 배열 필터링·정렬 등)의 결과를 메모이제이션합니다. 성능 문제를 측정할 수 있을 때만 이 훅들을 추가하세요.

useEffect 정리(cleanup) 함수는 어떻게 작동하나요?

`useEffect`에서 반환하는 함수가 정리 함수입니다. 의존성 변경으로 인해 이펙트가 다시 실행되기 전과 컴포넌트가 언마운트될 때 실행됩니다. 구독 취소, 타이머 제거, fetch 요청 중단, 이벤트 리스너 제거에 사용합니다. 정리 없이는 언마운트된 컴포넌트의 이펙트가 상태를 업데이트하려는 메모리 누수와 버그가 발생합니다. 예를 들어 이펙트에서 데이터 소스를 구독한다면 `() => subscription.unsubscribe()`를 정리 함수로 반환하세요.

값 저장에서 useRef와 useState의 차이는 무엇인가요?

두 훅 모두 렌더링 간에 값을 저장할 수 있지만 동작이 다릅니다. `useState` 값을 업데이트하면 리렌더링이 발생하고, `useRef` 값(`.current`)을 업데이트하면 리렌더링이 발생하지 않습니다. 컴포넌트가 기억해야 하지만 변경 시 시각적 업데이트가 필요 없는 값(렌더 횟수, 이전 프롭 값, 타이머 ID, DOM 노드 참조)에는 `useRef`를 사용하세요. UI에 반영되어야 하는 값에는 `useState`를 사용하세요.

React Context API는 어떻게 동작하고 언제 사용해야 하나요?

Context는 모든 레벨에서 수동으로 props를 전달하지 않고 컴포넌트 트리를 통해 값을 공유하는 방법을 제공합니다. `createContext(기본값)`으로 컨텍스트를 만들고, `<Context.Provider value={...}>`로 트리를 감싸고, 모든 자식에서 `useContext(Context)`로 소비합니다. 현재 사용자, 테마, 로케일, 인증 상태 같은 진정한 전역 데이터에 이상적입니다. 자주 변경되는 상태(폼 입력 등)에는 모든 소비자가 매번 리렌더링되므로 사용을 피하세요.

React.memo란 무엇이고 언제 도움이 되나요?

`React.memo`는 컴포넌트를 래핑하고 렌더링 결과를 메모이제이션하는 고차 컴포넌트입니다. 이전 렌더링과 같은 props를 받으면 리렌더링을 건너뛰고 캐시된 결과를 재사용합니다. 부모가 자주 리렌더링되지만 자식의 props가 거의 변경되지 않을 때 도움이 됩니다. props가 매 렌더링마다 변경되면 도움이 되지 않으며, 비교를 위한 약간의 오버헤드가 추가되므로 프로파일링으로 확인할 수 있을 때만 사용하세요.

React.lazy와 Suspense를 이용한 지연 로딩은 어떻게 동작하나요?

`React.lazy(() => import("./Component"))`는 처음 렌더링될 때만 서버에서 가져오는 지연 로딩 컴포넌트를 만듭니다. `<Suspense fallback={<Loading />}>`로 래핑하면 로딩 중 폴백을 표시합니다. 이렇게 하면 번들이 분할되어 사용자가 실제로 방문하는 컴포넌트의 코드만 다운로드해 초기 로드 시간이 개선됩니다. 라우트 수준 컴포넌트, 모달, 초기 렌더링에 보이지 않는 대형 컴포넌트에 사용합니다.

forwardRef 패턴이란 무엇이고 언제 필요한가요?

`forwardRef`는 부모 컴포넌트가 자식 컴포넌트의 DOM 요소에 `ref`를 전달할 수 있게 합니다. 일반적으로 `ref`는 일반 prop이 아니라 전달할 수 없습니다. 자식 컴포넌트를 `React.forwardRef((props, ref) => <input ref={ref} {...props} />)`로 래핑하면 ref를 받아 전달할 수 있습니다. 부모가 프로그래밍 방식으로 포커스를 설정하거나, 크기를 측정하거나, DOM에 직접 접근해야 하는 외부 라이브러리와 통합해야 할 때 필요한 재사용 가능한 폼 컴포넌트(Input, Select 등)를 만들 때 사용합니다.