한 걸음씩
[React] React mini project - pizza menu 본문
◇ 프로젝트 이름
- Pizza menu
◇ Tech
- HTML&CSS
- React
◇ 프로젝트 설명
- 리액트의 props을 사용하여 부모 컴포넌트가 자식 컴포넌트에게 데이터를 보내주어 프로젝트를 완성하였다.
- 부모 컴포넌트에서 데이터를 전달할 때 map 메서드를 사용하여 자식 컴포넌트에게 전달하였다.
프로젝트를 할 때 컴포넌트를 어떻게 나눌 것인가에 대해 먼저 생각을 해보았다.
Header, Menu, Footer 이렇게 큰 컴포넌트를 세 개로 나눈 후
피자 이미지 사진은 public 폴더에 위치한다.
Menu 컴포넌트 부분을 살펴보면 메뉴들이 나열된 부분이 있는데 이 부분을 좀 더 쪼개서 pizza 컴포넌트로 만들어 피자 데이터를 props을 이용하여 데이터를 전달하였다.
Footer 컴포넌트도 마찬가지로 영업시간이 12시부터 22시까지 인데 이 부분을 삼항 연산자를 이용하여 Order컴포넌트를 하나 더 만들어 가독성을 높여주었다.
https://developer.mozilla.org/ko/docs/Web/CSS/gap
gap - CSS: Cascading Style Sheets | MDN
CSS gap 속성은 행과 열 사이의 간격 (gutters)을 설정합니다. row-gap (en-US)과 column-gap (en-US)의 단축 속성입니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Glossary/Grid
그리드 (Grid) - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN
'CSS 그리드(grid)'는 display (en-US) 속성의 grid 값을 사용하여 정의됩니다. grid-template-rows (en-US) 및 grid-template-columns 속성을 사용하여 그리드의 열과 행을 정의할 수 있습니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/CSS/grid-template-columns
grid-template-columns - CSS: Cascading Style Sheets | MDN
grid-template-columns CSS 속성은 grid columns의 열 이름과 트랙 크기 조정 함수들을 정의합니다.
developer.mozilla.org
https://developer.mozilla.org/ko/docs/Web/CSS/filter
filter - CSS: Cascading Style Sheets | MDN
CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.
developer.mozilla.org
'React' 카테고리의 다른 글
| [React] React mini project2 - travel-list (1) | 2024.01.16 |
|---|---|
| [React] state management (0) | 2024.01.15 |
| [React] State, Events, and Forms: Interactive Components (0) | 2024.01.09 |
| [React] components, props and JSX (0) | 2024.01.08 |
| [React] 리액트와 같은 프레임워크는 왜 존재할까? (1) | 2024.01.01 |
