[React] Udemy 강의 노트 11-1

 

 

 

설정 시작하기

- 이전까지 useEffect, useReducer 등의 훅을 살펴보았다.

- 모든 핵심 리액트 기능을 활용하여 음식 주문 앱을 만든다.

- 일반적인 ui를 위한 UI 폴더와  header등을 넣는 Layout 폴더, 아이템을 담는 Meals 폴더와 장바구니인 Cart 폴더를 만든다.

 

 

 

"헤더" 컴포넌트 추가하기 

- 헤더는  상단에 있는 툴바

- 이미지도 import 할 수 있다. import mealsImage from '../../assets/meals.jpg'; , <img src={mealsImage} />

- 임포트 하면 완성된 애플리케이션에 이미지가 포함되도록 반환된다.

- 서버에 배포하여 해당 이미지에 대한 링크를 만들 수 있고 그 링크는 만들어진 코드에 동적으로 삽입된다.

 

 

"장바구니" 버튼 컴포넌트 추가하기

- 

 

"식사" 컴포넌트 추가하기

- 음식 목록과 음식 설명으로 각각 두 개의 컴포넌트를 생성

- 자바스크립트 객체 배열을 JSX 요소 배열로 변환해야 한다.

- 이것은 이 코스 전반에 걸쳐 리액트로 할 수 있는 일이다.

 

 

개별 식사 항목 추가 및 표시하기

-

 

양식 추가하기

- 앱의 다양한 곳에서 사용하기 위해 인풋이나 버튼처럼 재사용이 가능한 사전 스타일링된 유틸리티 컴포넌트를 필요로 한다.

- 객체에 있는 모든 키-값 쌍을 프롭으로 추가하기 위해 {...props.input} 처럼 스프레드 연산자를 사용할 수 있다.

- 

 

 

 

 

 

양식 입력 IDs 수정하기

-

 

"장바구니" 컴포넌트 작업하기

-