React 정리 - swkim0128/PARA GitHub Wiki

리액트 정리 목차

1. 리액트 소개

  • 리액트의 개념과 특징
  • 리액트의 장점과 단점
  • 리액트와 다른 프레임워크의 차이점
  • 리액트의 사용 사례

2. 리액트 설치 및 환경 설정

  • 리액트 프로젝트 생성 (Create React App)
  • JSX(JavaScript XML) 개념
  • Babel과 Webpack의 역할
  • 리액트 개발 도구 (React Developer Tools)

3. 리액트 컴포넌트

  • 함수형 컴포넌트와 클래스형 컴포넌트
  • 컴포넌트의 생명주기 (Class vs Function Hooks)
  • Props와 State의 개념
  • 이벤트 처리

4. JSX (JavaScript XML)

  • JSX의 문법과 사용법
  • JSX의 제한 사항
  • JSX에서 조건부 렌더링
  • JSX에서의 리스트 렌더링과 key 사용법

5. 리액트 상태 관리 (State Management)

  • 컴포넌트의 상태 관리 (State)
  • 상태의 불변성 (Immutability)
  • Props와 State의 차이
  • 상위 컴포넌트에서 하위 컴포넌트로 데이터 전달

6. Hooks

  • Hooks 소개
  • useState로 상태 관리
  • useEffect로 사이드 이펙트 관리
  • useContext로 전역 상태 관리
  • 기타 유용한 Hooks (useRef, useReducer, useCallback, useMemo)

7. 이벤트 처리

  • 리액트에서 이벤트 처리하는 방법
  • Synthetic Event와 기본 DOM 이벤트의 차이
  • 이벤트 핸들러와 Props로 이벤트 전달

8. 컴포넌트 스타일링

  • 인라인 스타일링
  • CSS 모듈 (CSS Modules)
  • Styled Components
  • Sass(SCSS)와 Less 사용법

9. 리액트 라우팅 (React Router)

  • React Router 소개
  • 기본적인 라우팅 설정
  • 동적 라우트와 URL 파라미터
  • 중첩 라우팅
  • 라우트 보호 (Protected Routes)

10. 리액트 상태 관리 라이브러리

  • Context API
  • Redux 기초
  • Redux와 React의 통합
  • Redux Toolkit을 이용한 상태 관리
  • MobX 및 다른 상태 관리 라이브러리

11. 폼 처리

  • 리액트에서 폼 관리
  • Controlled vs Uncontrolled Components
  • useState를 이용한 폼 데이터 관리
  • 라이브러리를 이용한 폼 관리 (Formik, React Hook Form)

12. API 통신 및 데이터 페칭

  • fetch와 axios를 이용한 API 호출
  • 비동기 데이터 처리 (Promise, async/await)
  • useEffect로 데이터 페칭하기
  • React Query를 이용한 상태 관리와 데이터 페칭

13. 성능 최적화

  • 컴포넌트 리렌더링 최적화
  • React.memo와 useMemo
  • useCallback으로 함수 최적화
  • 코드 스플리팅(Code Splitting)과 Lazy Loading
  • Virtual DOM의 이해

14. 테스트

  • 리액트 컴포넌트 테스트 방법
  • Jest와 React Testing Library를 이용한 테스트
  • 유닛 테스트와 통합 테스트
  • 스냅샷 테스트

15. React와 TypeScript

  • TypeScript로 리액트 프로젝트 설정
  • Props와 State에 대한 타입 지정
  • 함수형 컴포넌트와 클래스형 컴포넌트에 타입 적용
  • Custom Hooks에서 타입 적용

16. 리액트의 고급 개념

  • 고차 컴포넌트(Higher-Order Components)
  • 렌더 프로프(Render Props)
  • Context API를 활용한 컴포넌트 트리 관리
  • Portals를 이용한 DOM 외부에 렌더링

17. 리액트 애니메이션

  • CSS 애니메이션과 전환
  • react-transition-group을 이용한 애니메이션
  • framer-motion 라이브러리 사용

18. 리액트 개발 실무

  • 폴더 구조와 컴포넌트 아키텍처 설계
  • 리액트 프로젝트 배포 (Netlify, Vercel, GitHub Pages)
  • 리액트와 CI/CD 통합 (Travis CI, GitHub Actions)
  • PWA(Progressive Web App)로 리액트 앱 만들기
⚠️ **GitHub.com Fallback** ⚠️