React 실습

1-1 웹 개발의 변천사

• 01 전통적인 방식 (서버에서 완성된 HTML 응답)
  • 01 Todo List
• 02 SPA (Single Page Application)
  • Todo List (HTML + vanillaJS)
    • Sample
    • 01 목록 조회
    • 02 등록
    • 03 수정
    • 04 삭제, 완성
    • 05 데이터를 기반으로 화면 리렌더링
  • Todo List (vanillaJS + Lib)
    • 06 Reaction.createElement() 사용해서 UI 구성
    • 07 UI 구성 요소별 각각의 함수로 분리(컴포넌트로 만들기)
    • 08 상태(데이터) 변경시 화면 리렌더링
    • 09 컴포넌트를 모듈로 분리
  • Counter (라이브러리 개발)
    • Sample
    • 01 HTML + JS
    • 02 HTML 대신 JS로 UI 구성
    • 03 createElement() 함수 만들기
    • 04 createElement() 함수 하나로 통합
    • 05 createRoot(), render() 함수 만들기
    • 06 UI 구성 요소별 각각의 함수로 분리(컴포넌트로 만들기)
    • 07 상태(데이터) 변경시 자동으로 UI 리렌더링
    • 08 컴포넌트를 모듈로 분리
• 03 React
  • Counter - React Sample
  • Todo List - React Sample
  • 01 Counter - React로 구현(React.createElement)
  • 02 Counter - React로 구현(JSX)
  • 03 Todo List - React로 UI 구성(JSX)
  • 04 Todo List - React 컴포넌트 분리
  • 05 Todo List - React 기능 추가
  • 06 Todo List - React 컴포넌트를 모듈로 분리

2-1 리액트란?

• Hello React
  • 01 Hello HTML
  • 02 Hello DOM
  • 03 Hello React
  • 04 Hello JSX with babel
• Simple Todo List
  • 05 Simple Todo List - HTML
  • 06 Simple Todo List - React
  • 07 Simple Todo List - React Component
  • 08 Simple Todo List - React Props

2-2 리액트 개발 환경 구축

• 09 Vite로 개발 환경 구축 및 빌드, 배포

2-3 Props

• 10 Button 컴포넌트에 Props 전달

2-4 State

• 11 state 대신 컴포넌트 외부의 변수 사용시 문제점
• 12 이벤트 핸들러에서 state 값을 여러번 변경했을 때 문제점
• 13 상태관리 대상이 객체일 경우 주의 사항
• 14 상태관리 대상이 복합 객체일 경우 불변성 (feat. immer)
• 15 회원가입 입력값 상태 관리
• 16 회원가입 입력값 검증 (feat. react-hook-form)

클래스 컴포넌트

• 01 클래스 컴포넌트
• 02 클래스 컴포넌트 - 함수형 컴포넌트와 같이 사용
• 03 클래스 컴포넌트 - 컴포넌트의 라이프 사이클

리액트 라우터

• 01 클라이언트 라우팅 직접 구현
• 02 리액트 라우터 사용

Context API

• 01 Prop Drilling
• 02 Context API - useContext 훅
• 03 Context API - use 훅

7-1 Redux

• 01 Redux

7-2 Recoil

• 02 Recoil

7-3 Zustand

• 03 Zustand

8-1 바닐라 CSS

• 01 바닐라 CSS

8-2 CSS Module

• 02 CSS Module

8-3 Styled Components

• 03 Styled Components

8-4 Tailwind CSS

• 04 Tailwind CSS

• 01 Fetch API
• 02 Axios 라이브러리
• 03 React Query 라이브러리
• 04 Fetch-on-render와 Fetch-then-render
• 05 Render-as-you-fetch(Suspense)

12-1 Todo List

• 01 기본 Todo List
• 02 컨테이너 컴포넌트 추가
• 03 useRef, useReducer로 상태 관리
• 04 React.memo, useCallback으로 메모이제이션
• 05 리액트 라우터 적용
• 06 API 서버 연동
• 07 전역 상태 관리
• 08 TanStack Query 사용