function Main() { // 2
return <h1 className="ir">상품페이지 목록</h1>;
}
const Card = function ({ goods }) {
const url = "http://test.api.weniv.co.kr/" + goods.thumbnailImg;
return (
<li className="product-item">
<div className="product-img">
<img src={url} />
</div>
<strong className="product-name sl-ellipsis">
{goods.productName}
</strong>
<button className="like-btn"></button>
<div className="product-price">
<strong className="price m-price">
{goods.price}
<span>원</span>
</strong>
</div>
</li>
);
};
const Cart = () => <a href="#" className="list-btn cart-link"></a>;
const Product = function ({ item }) { // 3
return (
<main className="product">
<ul className="product-list">
<Card goods={item[0]} />
<Card goods={item[1]} />
<Card goods={item[2]} />
<Card goods={item[3]} />
<Card goods={item[4]} />
<Card goods={item[5]} />
<Card goods={item[6]} />
</ul>
<Cart />
</main>
);
};
const body = ( // 1
<div>
<Main />
<Product item={data} />
</div>
);
const domContainer = document.querySelector("#root"); // 4
ReactDOM.render(body, domContainer);
- body 라는 변수에 JSX 형식으로 Main, Product 함수의 결과를 넣는다.
위 소스코드에는 data라는 객체가 없지만 있다고 가정하고 Product 함수에item이라는 변수에 data를 담아 props로 전달한다.- Main 함수는
<h1>
태그 하나를 반환한다.- 1번에서 item으로 props를 구조 분해 할당으로 전달 받아 Card 함수에 객체 데이터 7개를 goods라는 변수에 담아 props로 전달한다. 만약, 구조 분해 할당으로 전달하지 않으면
props.item
이런식으로 props를 붙여야한다.- 생략된 부분이 있지만 앞선 1,2,3 과정을 모두 거친 결과를 어디에 추가할지 정하는 부분인데, 넣어줄 태그를 선택한 다음
ReactDOM.render(최종 결과물, 태그);
를 사용해 화면에 표시한다.
프로젝트 생성 및 실행
터미널에서
npx create-react-app 폴더명
을 입력하면 프로젝트와 react 기본 module 들이 설치된다. 설치된 프로젝트 폴더로 이동한 뒤에npm start
를 입력하면 실행된다.
Github에 수동 배포
- 아래 코드를 package.json에 추가.
{ "homepage":"여러분 github page url", ... }
- npm run build 입력하며 build 폴더 및 resource 생성.
- build 폴더 안에 있는 파일을 그대로 github pages에 업로드.
❓ 빌드
영문 서적을 한글로 번역하여 출판하는 것을 예로들면 아래와 같다.
1. 영문으로된 글을 한글로 번역하는 것은 컴파일이다.
2. 번역한 글을 책으로 엮는 것은 빌드이다.
3. 완성된 책을 고객들이 읽을 수 있도록 서점에 진열하는 것은 배포이다.
4. 1~2번 과정을 하나로 묶어 '빌드 한다'고 하기도 한다.
즉, Node 환경에 구동되는 리소스(JS, 모듈 등)들을 브라우저 환경에서 구동할 수 있도록 하는 과정이 빌드이다.
빌드 개념 출처