데이터를 그리기 위한 Front_End 언어 공부하기 : React 학습 로드맵.

▽ React 학습 로드맵.

목  차

1. React.js의 기본 이해와 환경 구축.

2. 컴포넌트 설계와 Props/State

3. React Hooks 상세 가이드

4. 상태 관리 심화 (컴포넌트 내부 -> 전역 )

5. 라우팅과 네비게이션

6. 폼 처리와 유효성 검증

7. API 연동과 데이터 핸들링

8. 스타일링 전략

9. 컴포넌트 재사용성과 추상화

10. 테스트와 품질 보장

11. 프로젝트 설계 & 최적화 & 배포.

12. React 렌더링 성능 최적화.

📘 1. React.js의 기본 이해와 환경 구축.

---

📗 1.1 React 철학과 기본 개념

• 📙 React는 왜 등장했는가? (MVC 한계와 컴포넌트 기반의 필요성)

• 📙 Virtual DOM vs Real DOM

• 📙 선언형 UI vs 명령형 UI

• 📙 SPA와 CSR의 차이점

📗 1.2 React 프로젝트 초기 설정

• 📙 Node.js, npm/yarn 설치 및 관리

• 📙 React 프로젝트 초기화 (Vite, CRA, Next.js 비교)

• 📙 디렉터리 구조 설계 (src, components, pages, hooks 등)

📗 1.3 JSX 완전 정복

• 📙 JSX의 정체: HTML-in-JavaScript or JS-in-HTML?

• 📙 JSX 표현식의 위치와 제한사항

• 📙 JSX 내 조건문 처리 방법 (&&, ? :, if 활용)

• 📙 JSX에서 배열 렌더링 (key 역할과 주의점 + 조건부 렌더링 + 리스트 렌더링)

• 📙 JSX의 스타일링 방법 (inline, className, 외부 CSS 등)

📘 2. 컴포넌트 설계와 Props/State

---

📗 2.1 컴포넌트 구성 원리

• 📙 함수형 컴포넌트 정의 및 구조

• 📙 컴포넌트는 왜 순수 함수처럼 만들어야 하나?

• 📙 컴포넌트 분리 기준: 재사용성, 책임 분리 (SRP)

📗 2.2 Props의 활용

• 📙 부모 → 자식 데이터 전달

• 📙 props destructuring (구조 분해 할당)

• 📙 props의 기본값 설정 (defaultProps, TypeScript 타입 사용)

• 📙 children props와 slot-like 패턴 설계

• 📙 단방향 데이터 흐름 .

📗 2.3 useState 심화

• 📙 기본 사용법 (counter 예제)

• 📙 객체 및 배열 상태 업데이트 (불변성 주의)

• 📙 상태 업데이트는 비동기적이다 → 배치 업데이트 이해

• 📙 여러 개의 state 변수 분리 vs 통합 전략

• 📙 Controlled Component (양방향 데이터 흐름 )

📘 3. React Hooks 상세 가이드

---

📗 3.0 Hooks 기본 원칙

• 📙 Rules of Hooks

📗 3.1 useState / useReducer 성능 비교

• 📙 상태 변경이 자주 일어나는 경우 useReducer의 이점

• 📙 컴포넌트가 많은 상태를 다룰 때 useState와의 차이

📗 3.2 useEffect 성능 관점에서의 주의점

• 📙 의존성 배열.

• 📙 의존성 배열로 인한 불필요한 호출 방지

• 📙 클린업 함수 최적화 (clearTimeout, abortController)

• 📙 렌더링과 effect 실행 타이밍 구분 (동기 vs 비동기 문제)

📗 3.3 useMemo / useCallback 효과적인 사용 전략

• 📙 연산량이 많은 계산 캐싱

• 📙 함수/객체 참조 변경 방지 (자식 컴포넌트 불필요 리렌더 방지)

• 📙 과도한 사용 시 오히려 성능 저하되는 케이스 분석

📗 3.4 useRef 활용.

• 📙 DOM 접근, 값 유지, 이전 값 저장

📗 3.5 커스텀 훅 제작 시 성능 고려사항

• 📙 성능 고려 + 설계 원칙(네이밍, 재사용성, 관심사 분리)

• 📙 내부 상태 공유와 컴포넌트 간 리렌더링 분리 전략

• 📙 context + custom hook 구성 시 memo 병합

📘 4. 상태 관리 심화 (컴포넌트 내부 -> 전역 )

---

📗 4.1 상태의 위치 최적화

• 📙 state hoisting이 가져오는 렌더링 비용

• 📙 로컬 상태를 전역으로 올릴 때의 trade-off 분석

📗 4.2 Context API vs 전역 상태 관리 라이브러리

• 📙 Context의 재렌더링 문제 (Provider 하위 트리 전체 리렌더)

• 📙 해결 방안:

  • 📒 상태 분리 Provider (context 분할)

  • 📒 "Prop Drilling 해결책으로서 Context"

  • 📒 "Context 재렌더링 이슈 + use-context-selector 해결"

  • 📒 context + memo + selector 패턴 적용 (e.g. use-context-selector)

  • 📒 Zustand/Recoil과의 비교 분석

📗 4.3 전역 상태와 React 렌더링

• 📙 렌더링 트리깊이와 상태 위치에 따른 영향도 분석

• 📙 Recoil, Zustand, Jotai에서의 atom 단위 렌더링 제어

📗 4.4 Redux Toolkit vs Zustand vs Recoil 비교

• 📙 Redux Toolkit: 대규모 프로젝트

• 📙 Zustand: 경량 상태 관리

• 📙 Recoil: atom 단위 & React 친화성

📗 4.4 상태 구조 설계 Best Practice

• 📙 대용량/복잡 상태에서의 불변성 관리 (immer or batching)

• 📙 deep clone 없이 성능 유지를 위한 트릭

📘 5. 라우팅과 네비게이션

---

📗 5.1 React Router v6+

• 📙 BrowserRouter, Routes, Route 설정

• 📙 동적 파라미터 처리 (:id, useParams)

• 📙 Link, useNavigate 활용한 페이지 이동

📗 5.2 고급 라우팅 패턴

• 📙 중첩 라우트와 Outlet 구조

• 📙 레이아웃 기반 라우팅

• 📙 Auth Route (로그인 여부에 따른 진입 제한)

• 📙 Lazy loading + Suspense 활용

📘 6. 폼 처리와 유효성 검증

---

📗 6.1 기본 폼 처리

• 📙 controlled vs uncontrolled input

• 📙 input 상태 관리와 submit 이벤트

• 📙 폼 값의 객체 관리 및 리셋 처리

📗 6.2 React Hook Form 실전

• 📙 register, handleSubmit 구조

• 📙 유효성 검증 패턴 (required, pattern 등)

• 📙 외부 라이브러리 연동: Yup, Zod

• 📙 상태별 에러 메시지 및 focus 처리

📘 7. API 연동과 데이터 핸들링

---

📗 7.1 API 요청 전략 최적화

• 📙 useEffect 내 fetch 요청 시 렌더 차단 이슈 해결

• 📙 Suspense + useTransition 활용 (React 18)

• 📙 요청 중 중복 방지 (debounce, throttle, abortController)

📗 7.2 데이터 캐싱과 상태 연동

• 📙 캐싱 전략:

  • 📒 LocalStorage vs SessionStorage vs 메모리 (context/Zustand)

  • 📒 stale-while-revalidate 패턴 소개

• 📙 SWR, React Query에서의 캐싱 전략

  • 📒 revalidation 시간 제어

  • 📒 background fetch, prefetch, pagination

📗 7.3 Loading, Error, Empty State 전략

• 📙 로딩 중에는 skeleton UI 적용으로 렌더 차단 최소화

• 📙 fallback 구조 및 에러 경량 처리

• 📙 대량 데이터 비동기 페이징 구성 (무한스크롤 vs 페이지네이션)

📗 7.4 API 요청 최소화 전략

• 📙 중복 요청 방지

  • 📒 debounce, memoized fetch, key 기반 캐시

• 📙 중첩 fetch 병렬화: Promise.all, batching 요청 구성

• 📙 GraphQL vs REST 요청 단위 성능 비교

📘 8. 스타일링 전략

---

📗 8.1 다양한 스타일링 방식

• 📙 전통적인 CSS + CSS Modules

• 📙 Styled-components 기본/고급 사용법

• 📙 Tailwind CSS 설정 및 활용 패턴

📗 8.2 다크모드와 테마 설정

• 📙 ThemeProvider 패턴

• 📙 전역 스타일 reset

• 📙 조건부 스타일 적용 (isDark 모드 분기)

📘 9. 컴포넌트 재사용성과 추상화

---

📗 9.1 Atomic Design 관점

• 📙 atoms, molecules, organisms의 구조 이해

• 📙 디자인 시스템 구성의 기반

📗 9.2 고차 컴포넌트 (HOC) & Render Props

• 📙 HOC: withAuth, withLoading 등의 패턴

• 📙 Render Props 패턴과 훅 대체

📗 9.3 Compound Component 패턴

• 📙 Tabs, Accordion, Modal 구조 추상화

• 📙 Context 조합으로 상태 공유

📘 10. 테스트와 품질 보장

---

📗 10.1 유닛 테스트

• 📙 Jest + React Testing Library 설정

• 📙 컴포넌트 렌더링 및 이벤트 시뮬레이션

📗 10.2 통합 테스트 & API 모킹

• 📙 MSW(mock service worker)로 API 응답 시뮬레이션

• 📙 상태 기반 조건별 테스트 시나리오 구성

📘 11. 프로젝트 설계 & 최적화 & 배포.

---

📗 11.1 실전 프로젝트 설계

• 📙 도메인 기반 폴더 구조

• 📙 컴포넌트, 훅, API, 상태 구조 분리

• 📙 Lint, Prettier, husky 적용

📗 11.2 퍼포먼스 최적화

• 📙 불필요한 렌더링 방지 (React.memo, key 주의)

• 📙 코드 스플리팅 (lazy, Suspense)

• 📙 이미지 lazy loading, preload 전략

📗 11.3 배포 및 운영

• 📙 Vite/CRA/Next 기반 빌드 비교

• 📙 Vercel, Netlify, S3 배포

• 📙 .env 구성, CORS, API 연결 체크리스트

📘 12. React 렌더링 성능 최적화.

---

📗 12.1 React의 렌더링 구조 이해

• 📙 컴포넌트 렌더링 발생 조건

  • 📒 상태(state)/props 변경 → 리렌더링 흐름

  • 📒 부모 컴포넌트 리렌더 시 자식 렌더링 여부

• 📙 Virtual DOM 비교 & Diff 알고리즘 개념

• 📙 reconciliation(조정) 과정이 일어나는 시점

• 📙 Render Phase & Commit Phase 구분

• 📙 effect 실행 시점 포함

📗 12.1.1 Fiber Architecture

• 📙 기존 Stack Reconciliation vs Fiber 비교

• 📙 우선순위 기반 작업 분할

📗 12.2 불필요한 렌더링을 방지하는 기법들

• 📙 React.memo로 컴포넌트 메모이제이션

  • 📒 props가 참조값일 경우 (객체, 함수)의 문제점

  • 📒 shallow compare 원리와 주의점

• 📙 useCallback, useMemo 적절한 사용 시점

  • 📒 의존성 배열 관리

  • 📒 과용 시 성능 악화 사례도 소개

• 📙 key의 역할과 적절한 사용법

  • 📒 index 사용이 문제되는 이유

  • 📒 동적 리스트의 key 관리 팁

📗 12.3 렌더링 타이밍 최적화

• 📙 requestAnimationFrame 활용 예시

• 📙 Transition API (React 18+) 개요

  • 📒 startTransition()을 통한 낮은 우선순위 렌더링

  • 📒 UI 응답성 향상 사례 실습

  • 📒 Suspense for Data Fetching

• 📙 React 18 자동 배칭

• 📙 startTransition, useDeferredValue 등

📗 12.4 React DevTools로 성능 분석

• 📙 React Profiler 탭 활용법

  • 📒 “Why did this render?” 플러그인 활용

  • 📒 render count, re-render 원인 추적

• 📙 console.time, flamegraph 등 실습

📗 12.5 렌더링 최적화 케이스 스터디

• 📙 Form 컴포넌트에서의 Debounce 렌더링

• 📙 Table/Grid 대용량 렌더링 최적화 (Virtualized)

• 📙 불필요한 context 재렌더링 문제와 해결법

  • 📒 context 분할, memo + useContext 조합 등

📗 12.6 서버 렌더링과 CSR의 렌더링 전략 비교

• 📙 SSR (Server Side Rendering)의 초기 렌더링 특징

• 📙 hydration 과정의 성능 이슈

• 📙 CSR 대비 성능 trade-off 비교

• 📙 Next.js 기준 렌더링 방식별 비교 (SSR, SSG, ISR, CSR)

📗 12.7 안정성 & 예외 처리

• 📙 ErrorBoundary 클래스 컴포넌트 예시

• 📙 try/catch vs ErrorBoundary 차이