김정환블로그

[리액트 2부] 1편 최종정리

1장. 준비

  • 1부 강의 요약. 여기서 다루지 않은 고급 주제와 훅이 이 수업의 주요 내용
  • 실습 어플리케이션 미리 보기. 배달 어플리케이션의 주요 화면 세 개
  • 실습 환경 이해. 개발 도구, 웹팩, 바벨, 워크스페이스 설정

2장. 상품목록 화면

  • 단일 컴포넌트로 개발한 뒤 세부 컴포넌트로 분리하는 방식
  • 역할에 따라 작은 컴포넌트로 분리해서 비교적 명확하고 재사용할 수 있는 코드

3장. 주문내역 화면

  • 리액트로 사고하기 방식: UI 계층 구조 나누기, 정적 버전 만들기, 최소한의 상태와 위치 정하기
  • 주문내역 화면의 UI 계층을 나눠 정적 버전 개발
    • 기존 컴포넌트 활용: Page, Title, Navbar
    • 신규 컴포넌트 추가: Card, XXXCard
  • 최소한의 상태를 order를 정의하고 OrderPage 컴포넌트에 위치

4장. 장바구니 화면

  • 리액트로 사고하기 방식. UI 계층 구조 나누기, 정적 버전 만들기, 최소한의 상태와 위치 정하기, 역방향 데이터 추가
  • 장바구니 화면의 UI 계층을 나눠 정적 버전 개발
    • 기존 컴포넌트 활용: Page, Title, Navbar, ProductItem
    • 신규 컴포넌트 추가: FormControl, OrderForm, PaymentButton
  • 최소한의 상태를 prodcut를 정의하고 CartPage 컴포넌트에 위치
  • OrderForm에서 CartPage로 데이터 흐름을 추가함. 역방향 데이터
  • 리액트 레프에 대해 학습하고 OrderForm에 적용해 비제어 컴포넌트로 구성

--

이번 장에서 구현한 요구사항과 남은 요구사항을 비교해 보자.

공통

  • 0.1 화면구성: 3단 레이아웃이다. 상단, 중앙, 하단으로 구성된다. (UI)
  • 0.2 네비게이션바: 메뉴목록, 주문내역화면을 이동할 수 있다. (UI, 라우팅)
  • 0.3 네비게이션바: 현재 화면과 같은 링크를 선택한다. (UI, 라우팅)
  • 0.4 API 호출시 로딩 메세지를 다이얼로그로 표시한다. (다이얼로그)
  • 0.5 예외 처리용 메세지를 다이얼로그로 표시한다. (다이얼로그)

화면1. 상품 목록

  • 1.1 "메뉴목록" 제목을 상단에 표시한다. (UI)
  • 1.2 주문할 수 있는 상품 목록을 중앙에 표시한다. (UI)
  • 1.3 주문하기 버튼을 클릭하면 해당 상품을 담고 장바구니 화면으로 이동한다. (네비게이션)
  • 1.4 네비게이션바가 하단에 위치한다. (UI)

화면2. 장바구니

  • 2.1 "장바구니" 제목을 상단에 표시한다. (UI)
  • 2.2 제목 좌측에 뒤로 가기 버튼을 표시한다. (UI)
  • 2.3 선택한 상품 정보를 중앙에 표시한다. (UI)
  • 2.4 주문 정보를 입력할 수 있는 폼을 중앙에 표시한다. (UI)
  • 2.5 폼 입력 값을 검증하고 오류를 표시한다. (폼)
  • 2.6 결제하기 버튼을 하단에 표시한다. (UI)
  • 2.7 결제하기 버튼을 클릭하면 사용자 확인을 받는다. (다이얼로그)
  • 2.8 결제 성공 후 주문내역 화면으로 이동한다. (네비게이션)

화면3. 주문 내역

  • 3.1 "주문내역" 제목을 상단에 표시한다. (UI)
  • 3.2 주문내역 정보를 불러와 중앙에 표시한다. (UI)
  • 3.3 네비게이션바가 하단에 위치한다. (UI)

UI는 모두 구현했다. 남은 것은 라우팅, 폼, 다이얼로그 정도다. 이러한 요구사항을 소화해 내려면 리액트의 또 다른 고급 기능을 알아야한다. 다음 편에서는 이전 수업에서 다루지 않았던 리액트 고급주제를 다루겠다.

© 김정환 2023