React를 어떻게 공부해야 되는지 순서 정리
사람마다 공부하는 방법은 다릅니다. 이 로드맵을 맹목적으로 따르지는 마세요.

1. 기초 개념#

• React의 개요 및 역할
• JSX (JavaScript XML) 이해
• 컴포넌트 (Components)
  • 함수형 컴포넌트 (Functional Components)
  • 클래스형 컴포넌트 (Class Components)

2. Props와 State#

• Props (Properties) 이해
• State (상태) 관리
• Props vs State 차이점
• State 초기화 및 변경 (setState, useState)

3. 이벤트 처리#

• 이벤트 핸들링 (Event Handling)
• 폼 처리 (Forms Handling)
• Synthetic Event와 브라우저 이벤트의 차이

4. 컴포넌트 생명주기#

• 클래스 컴포넌트 생명주기 메서드 (Lifecycle Methods)
• 함수형 컴포넌트에서의 Hook 활용 (useEffect)

5. Hooks#

• useState, useEffect
• useRef, useContext
• 커스텀 훅 (Custom Hooks) 만들기
• useReducer, useMemo, useCallback

6. 조건부 렌더링#

• 조건에 따른 컴포넌트 렌더링 (Conditional Rendering)
• && 연산자, 삼항 연산자 (Ternary Operator) 활용

7. 리스트 및 키#

• 리스트 렌더링 (Rendering Lists)
• key 속성의 중요성 (Key Attribute)

8. 폼 및 입력 관리#

• 제어 컴포넌트와 비제어 컴포넌트 (Controlled vs Uncontrolled Components)
• 폼 데이터 관리

9. 상태 관리#

• Context API를 이용한 전역 상태 관리
• Redux (리덕스) 및 리덕스 툴킷(Redux Toolkit)
• Zustand와 같은 경량 상태 관리 라이브러리

10. React Router#

• React Router 사용법
• 동적 라우팅 (Dynamic Routing)
• 중첩된 라우트 (Nested Routes)
• URL 파라미터 및 쿼리 스트링 처리

11. API 통신#

• Fetch API 및 Axios를 이용한 데이터 요청
• useEffect와 함께 비동기 데이터 처리
• React Query 또는 SWR과 같은 데이터 패칭 라이브러리

12. 스타일링#

• CSS Modules
• Styled-components
• Emotion 및 Tailwind CSS 같은 스타일링 라이브러리
• Sass, Less와 같은 전통적인 CSS 프리프로세서

13. 최적화#

• React.memo를 사용한 컴포넌트 최적화
• useMemo와 useCallback을 사용한 성능 최적화
• 코드 스플리팅(Code Splitting) 및 React.lazy/Suspense 활용

14. 테스트#

• Jest와 React Testing Library를 이용한 단위 테스트
• 컴포넌트 렌더링 테스트 및 이벤트 테스트

15. 배포#

• Vercel, Netlify를 이용한 배포
• GitHub Pages를 이용한 간단한 배포
• CI/CD 도구와 연동한 자동 배포 파이프라인 구축

16. React Native (선택)#

• React를 사용한 모바일 앱 개발
• React Native 기본 개념 및 컴포넌트 학습

17. 프로젝트 실습#

• ToDo 리스트, CRUD 앱, 간단한 블로그 등 프로젝트 제작
• API와 연동된 리얼타임 웹 애플리케이션 제작
• 포트폴리오 프로젝트 구축

특히, Hooks와 상태 관리는 React의 핵심이므로 충분히 이해하는 것이 중요