![]()
자바스크립트의 map 함수를 컴포넌트에 응용하다 더보기 import React from 'react' import menuList from "./data/menu.json" import Button from 'react-bootstrap/Button'; import Card from 'react-bootstrap/Card'; import 'bootstrap/dist/css/bootstrap.min.css'; const Ex02 = () => { console.log(menuList); return ( menuList.map((menu) => ( {menu.category} {menu.name} {menu.price} Buy )) ) } export default Ex02 1. map 함수 /* map()..
![]()
화면에서 UI 요소를 구성하는 최소단위인 컴포넌트를 배우다. 1. 컴포넌트 정의 컴포넌트는 React에서 자주 사용한다. 반복되는 화면의 큰 틀, 일부분 등을 컴포넌트화 해서 app.js 사용할 수 있다. 2. 컴포넌트 사용 2 - 1. 상황 function App() { return ( 아메리카노 3500 아메리카노 3500 아메리카노 3500 ); } 위 코드를 보면 같은 구조의 코드가 반복되는 것을 볼 수 있다. 이러면 코드가 더러워지고 수정하기 불편하다. 이런 상황에서 컴포넌트를 사용하는 것이다. 2 - 2. 컴포넌트 파일 생성 컴포넌트파일들은 src 폴더 내에서 components 폴더를 생성해서 그 안에 컴포넌트 파일들을 생성해서 사용해 준다. 단, 컴포넌트 파일의 이름의 첫 스펠링은 무조건 ..
