[React] 리액트 2부 고급주제와 훅 - 01. 소개

[리액트2부]고급주제와훅을 수강하며 공부한 내용을 정리하는 글 입니다.
[리액트 1부] 만들고 비교하며 학습하는 리액트 (React) 강의 듣고 실습한 것은 github에 있습니다.

 

01. 1부 수업 요약

1부 수업에서는 쇼핑몰 검색 화면을 만들면서 리액트 기본 개념을 익혔다. 

 

준비편

라이브러리 없이 바닐라 js로 어플리케이션 개발했다. 

 

소개편

리액티브와 가상돔 개념을 익혔다. react, react-dom, babel, jsx의 역할을 이해했다. 

 

사용편 1

리액트로 어플리캐이션을 다시 만들었다.

컴포넌트, 상태, 이벤트 처리, 조건부/리스트 렌더링, 컴포넌트 생명주기 등 리액트의 주요 개념에 대해 이해하고 실습했다. 

 

사용편 2

여러 컴포넌트로 어플리케이션을 다시 설계했다. 역할에 따라 작은 컴포넌트 여러 개로 나누고 서로 협력하도록 했다.

상태 끌어올리기, 컴포넌트 재사용, 조합하는 방법을 익혔다. 

 

---

 

02. 2부에서 다룰 내용

1편. 리액트로 사고하기

화면 구성요소에 대한 컴포넌트 설계 기법을 익힌다.

리액트로 사고하는 방법과 이를 컴포넌트로 UI를 설계하는 훈련 과정을 경험한다. 

 

2편. 고급 주제

리액트 컨텍스트에 대해 학습한다. 컨텍스트가 필요한 상황을 이해하고 직접 만든다.

라우터의 역할을 이해하고 리액트 기반의 라우터를 만든다. 컴포넌트 로직 재사용을 위해 고차 컴포넌트 기법을 학습한다.

리액트 포탈까지 이해한 뒤 샘플 어플리케이션에서 활용한다.

 

3편. 기본 훅

훅의 등장 배경부터 기본 훅을 만들며 구조를 이해한다.

함수형 컴포넌트와 훅으로 샘플 어플리케이션을 다시 만든다. 

 

4편. 추가 훅

리듀서로 상태 관리의 복잡성을 줄이는 방법을 소개한다.

메모에제이션 훅으로 어플리케이션의 성능을 높이는 방법도 이해한다. 

클래스 컴포넌트와 비교해 함수형 컴포넌트와 훅으로 만들 때의 차이를 경험한다.

폼을 다시 만들어 비제어/제어 컴포넌트의 차이도 이해한다. 

 

---

 

03. 결과물 미리보기

• 메뉴 목록 화면
• 장바구니 화면
• 주문내역 화면

 

https://youtu.be/PBf1rur395g?si=sQ60yGrvR8ISy-nN

 

 

---

 

04. 요구사항

 

공통

• 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)

 

출처 : 리액트 2부 요구사항 | Github

요구사항