React의 주요 개념들

React 개념들을 JavaScript와의 관계로 분류

기초 개념:
1. JSX (React 고유)
2. Components (React 고유)
3. Props (React 고유)
4. State (React 고유)
5. Event Handling (JS와 비슷)
6. Conditional Rendering (JS 확장)
7. Lists and Keys (JS 확장)
8. Forms and Controlled Components (JS 확장)

핵심 개념:
1. Hooks (React 고유)
- useState
- useEffect
- useContext
- useReducer
- useCallback
- useMemo
- useRef
- 커스텀 Hooks

2. Component Lifecycle (React 고유)
3. Virtual DOM (React 고유)
4. Component Composition (React 고유)
5. Higher-Order Components (React 고유)
6. Render Props (React 고유)

상태 관리:
1. Context API (React 고유)
2. Redux (React 생태계)
- Actions
- Reducers
- Store
- Middleware
3. Recoil (React 생태계)
4. MobX (React 생태계)
5. Zustand (React 생태계)

라우팅:
1. React Router (React 생태계)
- BrowserRouter
- Routes
- Route
- Link
- Navigate
- Outlet
- Params (JS와 비슷)
- Query strings (JS와 비슷)

최적화:
1. React.memo (React 고유)
2. useMemo (React 고유)
3. useCallback (React 고유)
4. Code Splitting (JS와 비슷)
5. Lazy Loading (JS와 비슷)
6. Suspense (React 고유)

테스팅:
1. Jest (JS와 동일)
2. React Testing Library (React 생태계)
3. Cypress (JS와 동일)

스타일링:
1. CSS Modules (JS와 비슷)
2. Styled-components (React 생태계)
3. Emotion (React 생태계)
4. Tailwind CSS (JS와 동일)
5. SASS/SCSS (JS와 동일)

서버 통신:
1. Fetch API (JS와 동일)
2. Axios (JS와 동일)
3. React Query (React 생태계)
4. SWR (React 생태계)

TypeScript 관련:
1. 타입 정의 (JS 확장)
2. 인터페이스 (JS 확장)
3. 제네릭 (JS 확장)
4. 타입 가드 (JS 확장)

프로젝트 구조:
1. 폴더 구조 (JS와 비슷)
2. 컴포넌트 설계 (React 고유)
3. 상태 관리 아키텍처 (React 고유)
4. 모듈화 (JS와 동일)

성능 최적화:
1. 불필요한 렌더링 방지 (React 고유)
2. 메모이제이션 (React 고유)
3. 번들 사이즈 최적화 (JS와 비슷)
4. 이미지 최적화 (JS와 동일)

보안:
1. XSS 방지 (JS와 동일)
2. CSRF 대응 (JS와 동일)
3. 인증/인가 (JS와 동일)
4. 환경 변수 관리 (JS와 동일)

빌드 및 배포:
1. Webpack (JS와 동일)
2. Babel (JS와 동일)
3. ESLint (JS와 동일)
4. Prettier (JS와 동일)
5. CI/CD (JS와 동일)

추가적인 도구들:
1. Create React App (React 생태계)
2. Next.js (React 생태계)
3. Gatsby (React 생태계)
4. Vite (JS와 동일)

이를 통해 알 수 있는 점:
1. React는 JavaScript를 기반으로 하되, 많은 고유 개념을 가지고 있음
2. 기본적인 JavaScript 지식이 선행되어야 함
3. React 특유의 패러다임과 생태계를 이해해야 함
4. 많은 도구들이 JavaScript와 공유됨