React 실습

Todo List

• 01 컨테이너 컴포넌트 추가
• 02 TodoReducer에서 상태 관리 로직 작성, useRef로 input 요소에 포커스 추가
• 03 React.memo, useCallback으로 메모이제이션
• 04 리액트 라우터 적용
• 05 API 서버 연동
• 06 전역 상태 관리

1-1 웹 개발의 변천사

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

1-2 리액트 개발에 자주 사용하는 자바스크립트 문법

• 01 Arrow Function
• 02 구조 분해 할당(Destructuring assignment)
• 03 전개 연산자
  • 03-01 기본 데이터 타입과 참조형 데이터 타입
  • 03-02 객체에 적용
  • 03-03 배열에 적용
  • 03-04 전개 연산자를 이용한 얕은 복사
• 04 삼항 연산자
• 05 module
• 06 Promise, async/await
  • 06-01 동기 함수 호출
  • 06-02 비동기 함수 호출
  • 06-03 callback을 이용한 비동기 함수 호출
  • 06-04 Promise를 이용한 비동기 함수 호출
  • 06-05 async/await를 이용한 Promise
• 07 배열 메서드
  • 07-01 forEach
  • 07-02 map
  • 07-03 find
  • 07-04 filter
  • 07-05 reduce
• 08 메모이제이션

2-1 리액트란?

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

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

• 03 create-react-app (CRA)
• 04 Vite

2-3 Props

• 01 Button 컴포넌트에 Props 전달

2-4 State

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

3-1 리액트 훅

• 01 useState - 상태 관리
• 02 useEffect - side effect 관리
• 03 useReducer - 상태 관리 로직을 한곳에
• 04 useRef - 데이터 관리, DOM 엘리먼트 참조
• 05 useMemo - 함수의 반환값을 memoize
• 06 useCallback(함수 자체를 memoize), React.memo(컴포넌트를 memoize)

3-2 커스텀 훅

• 07 customHook - useCounter 커스텀 훅 사용
• 08 customHook - 커스텀 훅 없이 fetch API 사용
• 09 customHook - useFatch, useAxios 커스텀 훅 사용

클래스 컴포넌트

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

리액트 라우터

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

Context API

• 01 Prop Drilling
• 02 Context API

7-1 Redux

• 01 Redux

7-2 Recoil

• 02 Recoil

7-3 Zustand

• 03 Zustand

8-1 기본 방식

• 01 CSS import

8-2 CSS Module

• 01 CSS Module

8-3 Styled Components

• 02 Styled Components

8-4 Tailwind CSS

• 03 Tailwind CSS