React 실전

훅·상태관리·성능 최적화·서버 컴포넌트까지 실무 React

1. 1

   React Query useQuery

   react query v4 설치 react query 브라우저 호환 아무 버전이나 다 되는 줄 알았는데, 호환하는 브라이저가 있는걸 알았다. react query 설정하기 1. quertClient를 모든 컴포넌트가 접근하는 CRA는 app.tsx, Next.js는 \ app.tsx에

   2023.11.26
2. 2

   React Query useMutation

   React Query useMutation 사용법 React Query는 React 앱에서 데이터를 fetch하고 캐시하는 것을 간단하게 만들어주는 라이브러리입니다. useMutation은 React Query에서 제공하는 함수 중 하나로, 데이터를 create, update, dele

   2024.11.26
3. 3

   React useMemo, useCallback, memo 차이점

   useCallback , useMemo , 그리고 memo 는 모두 React에서 성능 최적화를 위해 사용되는 도구이지만, 각각의 목적과 사용 사례가 다릅니다. 아래에서 그 차이점을 설명하겠습니다. 1. useCallback 목적 : 함수를 메모이제이션하여 불필요한 재생성을 방지. 사용

   2024.11.28
4. 4

   React에서 getBoundingClientRect 활용하기

   React에서 getBoundingClientRect 활용하기 getBoundingClientRect 는 DOM 요소의 크기와 화면에서의 위치를 정확히 파악할 수 있는 메서드입니다. 이 메서드는 React에서 특정 요소가 화면에 보이는지 감지하거나, Lazy Loading, 애니메이션

   2024.11.29
5. 5

   React Query 심화 - 캐싱 전략과 무한 스크롤, 에러 핸들링

   React Query는 클라이언트에서 서버 상태 데이터 를 관리하는 데 특화된 라이브러리입니다. 이 글에서는 기본 useQuery / useMutation 에서 한 단계 나아가, 캐싱 전략, 무한 스크롤, 에러 핸들링 을 중심으로 정리합니다. 1. 캐시 전략: staleTime, cac

   2026.01.24
6. 6

   React 18 정리 - Concurrent Rendering과 실무 포인트

   React 18은 Concurrent Rendering 과 자동 배칭 , Suspense 개선 등을 통해 UI를 더 부드럽게 만들고, 서버 렌더링을 강화한 버전입니다. Next.js 13+ / 16 같은 프레임워크에서도 React 18 기능을 전제로 설계되어 있기 때문에, 핵심 개념은

   2026.01.28
7. 7

   React 폼 상태 관리 전략

   React에서 폼을 관리할 때 useState 만으로 처리할지, 라이브러리를 쓸지, 어디까지 커스텀 훅으로 뽑을지에 대한 기준을 정리하는 글입니다. 1. 컨트롤드 vs 언컨트롤드 각 방식의 장단점과, 실제로 어떤 화면에서 무엇을 선택하는 게 좋은지 간단한 예시와 함께 비교합니다. 2.

   2026.02.10
8. 8

   React Hooks 베스트 프랙티스 - 실무에서 자주 놓치는 포인트

   React Hooks는 함수 컴포넌트에서 상태와 생명주기를 다루는 강력한 도구입니다. 이 글에서는 useState , useEffect , useCallback , useMemo 등을 실무에서 올바르게 사용하는 방법과 자주 발생하는 실수들을 정리합니다. 1. useState 초기값과 함

   2026.02.10
9. 9

   React 성능 최적화 - 렌더링 최소화와 메모이제이션 전략

   React 애플리케이션의 성능을 개선하려면 불필요한 렌더링을 줄이고 , 비용이 큰 계산을 메모이제이션하는 것이 핵심입니다. 이 글에서는 실무에서 자주 사용하는 성능 최적화 기법들을 정리합니다. 1. React.memo로 컴포넌트 메모이제이션 props가 변경되지 않으면 리렌더링을 건너뜁

   2026.02.10
10. 10

    React Portal - DOM 트리 밖으로 컴포넌트 렌더링하기

    React Portal은 컴포넌트를 부모 컴포넌트의 DOM 계층 구조 밖 에 렌더링할 수 있게 해주는 기능입니다. 모달, 툴팁, 드롭다운 같은 UI 요소를 z index 문제 없이 구현할 때 유용합니다. 1. Portal 기본 사용법 createPortal children, contai

    2026.02.10
11. 11

    Framer Motion으로 React 애니메이션 다루기

    Framer Motion을 사용해서 React 컴포넌트에 자연스러운 모션을 추가할 때 기본적으로 알아 두면 좋은 개념들을 메모합니다. 1. motion 컴포넌트 기본 motion.div 와 animate , initial , transition 속성으로 단순한 등장/퇴장 애니메이션을 만

    2026.02.10
12. 12

    React Concurrent Features - useTransition과 useDeferredValue

    React 18의 Concurrent Features는 우선순위에 따라 렌더링을 조절 할 수 있게 해줍니다. useTransition 과 useDeferredValue 를 사용하면 사용자 입력을 즉시 반영하면서도, 무거운 업데이트는 지연시킬 수 있습니다. 1. useTransition으

    2026.02.10
13. 13

    React 코드 스플리팅과 Suspense 패턴

    번들 크기를 줄이고 초기 로딩 속도를 개선하기 위해 코드 스플리팅과 Suspense 를 어떻게 조합할지에 대한 간단한 메모입니다. 1. lazy와 Suspense 기본 React.lazy 와 Suspense 를 이용해 라우트 단위, 위젯 단위로 코드를 분리하는 패턴을 정리합니다. 2.

    2026.02.10
14. 14

    React Router 베스트 프랙티스

    React Router로 라우팅을 구성할 때 자주 부딪히는 문제들을 정리하고, 실무에서 많이 쓰는 패턴을 간단히 메모해 둔 글입니다. 1. 라우트 구조 설계 중첩 라우트, 레이아웃 컴포넌트, 코드 스플리팅을 어떻게 배치할지에 대한 기준을 잡습니다. 2. URL 설계 원칙 자원 중심 RE

    2026.02.10
15. 15

    React 상태 파생(derived state) vs memo - 어디에 두는 게 맞을까?

    React에서 자주 생기는 실수는 “계산 가능한 값”을 별도 state로 들고 가면서 동기화 버그 를 만드는 것입니다. 이 글은 derived state를 피하는 기준과, useMemo /계산 함수를 어디에 둘지 판단하는 실무 규칙을 정리합니다. 1. 결론부터 파생 가능한 값은 stat

    2026.02.10
16. 16

    Zustand로 가벼운 React 상태 관리하기

    Redux만 쓰기엔 부담스럽고, Context만으로는 아쉬울 때 쓸 수 있는 가벼운 상태 관리 라이브러리인 Zustand를 간단히 정리합니다. 1. 기본 스토어 정의 작은 예제로 create 함수로 스토어를 만들고, 컴포넌트에서 훅으로 사용하는 패턴을 기록합니다. 2. 상태 분리와 구조

    2026.02.10
17. 17

    React Testing Library - 사용자 중심 테스트 작성하기

    React Testing Library는 사용자가 컴포넌트를 어떻게 사용하는지 를 중심으로 테스트를 작성하도록 유도하는 테스트 도구입니다. 구현 세부사항보다는 사용자 관점의 동작을 검증하는 것이 핵심 철학입니다. 1. 기본 사용법 screen.getByRole , screen.getBy

    2026.02.10
18. 18

    Storybook으로 React 컴포넌트 문서화

    Storybook을 사용해 React 컴포넌트를 카탈로그처럼 정리하고, 디자인 시스템에 가까운 구조를 만드는 과정을 기록하는 글입니다. 1. 기본 세팅과 스토리 작성 프로젝트에 Storybook을 설치하고, 버튼/입력 같은 기본 컴포넌트에 스토리를 작성하는 흐름을 정리합니다. 2. Co

    2026.02.10
19. 19

    React Server Components - 서버에서 렌더링되는 컴포넌트

    React Server Components RSC 는 서버에서만 실행되고, 클라이언트로 JavaScript 번들을 전송하지 않는 새로운 컴포넌트 모델입니다. Next.js 13+ App Router에서 기본으로 사용되며, 성능과 번들 크기 최적화에 큰 도움을 줍니다. 1. Server

    2026.02.10
20. 20

    React ref와 forwardRef - DOM 접근과 컴포넌트 간 ref 전달

    React에서 DOM 요소에 직접 접근하거나, 자식 컴포넌트의 메서드를 호출할 때 ref 를 사용합니다. 이 글에서는 useRef , forwardRef , useImperativeHandle 의 사용법과 실무 패턴을 정리합니다. 1. useRef 기본 사용법 ref.current 는

    2026.02.10
21. 21

    React 컴포넌트 합성과 재사용 패턴

    컴포넌트를 합성해서 재사용성을 높이고, prop drilling이나 거대한 컴포넌트를 피하는 패턴들을 간단히 정리합니다. 1. Children 기반 합성 children 과 렌더 props를 활용해 레이아웃과 로직을 분리하는 패턴을 예시와 함께 정리합니다. 2. Compound Comp

    2026.02.10
22. 22

    React 접근성(a11y) 가이드

    React로 UI를 만들 때 기본적인 접근성 a11y 원칙을 지키기 위한 체크리스트를 정리해 둔 글입니다. 1. 시맨틱 마크업 div 남용 대신 적절한 HTML 태그를 쓰는 기준과, 스크린 리더가 어떻게 읽는지 간단한 예를 메모합니다. 2. 포커스 관리 모달, 드롭다운, 토스트 등에서

    2026.02.10
23. 23

    React Context 성능 최적화 - 리렌더 줄이는 실전 패턴

    Context는 전역 상태처럼 편하지만, 설계가 나쁘면 작은 변경에도 트리 전체가 리렌더될 수 있습니다. 이 글은 Context 사용 시 성능을 안정적으로 유지하는 패턴만 짧게 정리합니다. 1. 문제가 되는 구조 큰 객체를 한 Context에 몰아 넣기 Provider value가 렌더

    2026.02.10
24. 24

    React Error Boundary - 에러 처리와 사용자 경험 개선

    React에서 컴포넌트 렌더링 중 발생한 에러를 우아하게 처리 하고, 앱 전체가 크래시되지 않도록 보호하는 방법을 Error Boundary로 구현할 수 있습니다. 이 글에서는 Error Boundary의 기본 개념과 실무에서 활용하는 패턴을 정리합니다. 1. Error Boundary

    2026.02.10
25. 25

    React Server Components 1년 써보고 정리하는 멘탈 모델

    RSC를 처음 접하면 "서버에서 렌더링되는 컴포넌트"라는 설명이 오히려 혼란을 준다. SSR과 뭐가 다른데? 1년 운영해 보고 정착한 멘탈 모델을 공유한다. HTML이 아니라 데이터를 만든다 SSR은 HTML 문자열을 만들어 보낸다. RSC는 컴포넌트 트리를 직렬화한 데이터 RSC 페이

    2026.08.03
26. 26

    useOptimistic으로 낙관적 업데이트 제대로 쓰기

    좋아요 버튼을 눌렀는데 0.5초 뒤에 하트가 채워진다면, 그 0.5초는 사용자에게 "고장났나?"의 시간이다. 낙관적 업데이트는 서버 응답을 기다리지 않고 UI를 먼저 바꾸는 기법이고, React 19의 useOptimistic은 이걸 공식 패턴으로 만들었다. 수동 구현의 함정 useSt

    2026.08.09
27. 27

    React 서버 컴포넌트에서 데이터 패칭 최적화 — 실제 성능 개선 사례 3가지

    React 서버 컴포넌트는 클라이언트와 서버 간의 경계를 허물어주는 혁신적인 기능이다. 그러나 이 기능을 제대로 활용하기 위해서는 데이터 패칭 최적화가 필수적이다. 이번 글에서는 실무에서 경험한 성능 개선 사례를 통해 데이터 패칭 최적화의 중요성과 그 방법에 대해 알아보겠다. 1. 서버

    2026.08.10