리액트 기초부터 쇼핑몰 프로젝트까지! Part2 #1 Bootstrap으로 기본틀 제작
* 새로운 프로젝트 생성 & Bootstrap 사용하기
Bootstrap
: 레이아웃을 복사 붙여넣기 방식을 이용하여 편하게 개발할 수 있게 도와주는 외부 라이브러리
- 다운로드
react bootstrap 검색 or https://react-bootstrap.github.io/ 방문 ->get started -> npm install react-bootstrap bootstrap 터미널에 입력 -> css 명령어도 입력 ( import 'bootstrap/dist/css/bootstrap.min.css';
App.js 파일 상단에 입력)
(설치 명령어는 바뀔 수 있기 때문에 react-bootstrap 사이트에서 꼭 확인 필요함)
- 사용 예시
: button UI 가져다 쓰기
1. 상단에 import 하고
import Button from 'react-bootstrap/Button';2 버튼 두고 싶은 곳에 원하는 거 복붙하기
function App() {
return (
<div className='App'>
<Button variant="outline-success">Success</Button>{' '}
</div>
);
}
- 가져온 거 CSS 수정하기
-> 이부분은 더 공부 필요함.
* 이미지 넣는 법
css에서 넣기
원하는 이미지를 src 폴더에 넣은 뒤 App.css파일에서 url(./ 누르고 고르면 됨.
폴더에 있는 이미지를 열고 싶은 거면 url('./img/bg.png'); 치면 됨
./폴더명/파일명
html에서 이미지를 넣기
import 작명 from './img/bg,png';
function App() {
return(
<div className="main-bg" style={{ backgroundImage : 'url('+ 작명 +')' }}> </div>
public 폴더 이용하기
public 폴더에도 이미지 보관이 가능함.
build 시 public 폴더 안에 있는 건 압축이 안 됨.
public 폴더 이미지를 html에서 사용할 때는 그냥 /이미지경로 쓰고 import 없이 사용가능
<img src="/logo192.png />주의점
serve 경로에 발행하고 싶을 때는 경로를 추가해줘야됨
codingapple.com/ 에 발행할 땐 문제 안 되는데
codingapple.com/어쩌구/ 에 발행 시 문제가 됨.
<img src="/어쩌구/logo192.png" />
// 맨날 수정하기 싫으면 create react app 사이트 가서 시키는 대로 하단처럼 하면됨
<img src={process.env.PUBLIC_URL + '/img/logo192.png' } />;
* Import & Export
하단과 같이 서버에서 받아온 상품 object자료가 있다고 가정.
[
{
id : 0,
title : "White and Black",
content : "Born in France",
price : 120000
},
{
id : 1,
title : "Red Knit",
content : "Born in Seoul",
price : 110000
},
{
id : 2,
title : "Grey Yordan",
content : "Born in the States",
price : 130000
}
]
*) object 자료
let user = { name : 'kim', age : 20 } // object 자료 형식
console.log(user.name) // 원하는 자료 호출
서버에서 받아온 object 자료를 state에 저장해보기
import { useState } from 'react';
function App() {
let [shoes] = useState()
return (
상단의 내용을 다 저장하기엔 복잡하니까 따로 빼서 정리하려고 -> import & export 사용
data.js라는 파일에 있는 변수를 App.js에 가져와서 쓰고 싶으면
Export
변수 하나일 때
export default 변수명;
변수가 여러 개 일 때
export { 변수명1, 변수명2 };
// (data.js파일)
let a = 10;
export default a;
let a = 10;
let b = 20;
export {a,b};파일마다 export dafault 라는 키워드는 하나만 사용가능
변수, 함수, 자료형 전부 export 가능
Import
// App.js
import a from './data.js';
import { name1, name2 } from './data.js';
파일경로는 ./ 부터 시작해야됨, 현재 경로라는 뜻.
export { } 했던 것들은 import { } 쓸 때 자유작명이 불가능. export 했던 변수명 그대로 적어야함
// 원하는 곳에서 사용하기
function App() {
let [shoes] = useState(data)
return (
array 자료에서 원하는 정보만 바인딩하기
[ ]로 시작하면 array라고 생각하고 하단의 방식을 사용하면 됨.
{shoes[1].title}
// data가 저장된 shoes라는 state의 두번째차례의 배열1에서 title을 불러오겠다.
숙제 :
- 상품 설명 부분을 component화 하고 각각 다른 내용을 보여주게 만들어보자
function App() {
let [shoes] = useState(data)
return (
<div className='container'>
<div className='row'>
<Information shoes={shoes[0]} b={1}></Information>
<Information shoes={shoes[1]} b={2}></Information>
<Information shoes={shoes[2]} b={3}></Information>
</div>
</div>
</div>부모에 있던 shoes라는 state를 보낼 때 각각 다른 정보를 props로 보내면 됨.
shoes[0], shoes[1], shoes[2]를 각각 보내줌.
사진도 각각 다르게 하려면 (이미지 주소가 shoes1.jpg / shoes2.jps / shoe3.jpg 부분만 다르니까 그 부분을 다르게 보내줌)
props로 원하는 건 다 보낼 수 있으니까 자식 컴퍼넌트에서 바꿔주고 싶은 부분을 i라고 내 맘대로 작명해서 각각 다르게 보내줌.
function Information(props) {
return(
<div className='col-md-4'>
<img src={"https://codingapple1.github.io/shop/shoes" + props.b + ".jpg"} width="80%" />
<h4>{props.shoes.title}</h4>
<p>{props.shoes.price}</p>
</div>
)
}문자 중간에 변수를 넣고 싶으면 '문자' + 변수 + '문자' 이렇게 하고 {}로 가두면 됨.
- 반복되는 부분 map으로 정리하기
데이터 갯수에 맞게 알아서 생성할 수 있게 만들 수 있음. (데이터가 너무 많거나 몇 개인지 파악할 수 없을 때 용이)
{/* <Information shoes={shoes[0]} i={1}></Information>
<Information shoes={shoes[1]} i={2}></Information>
<Information shoes={shoes[2]} i={3}></Information> */}상단처럼 반복되는 것들을 map으로 정리함.
function App() {
let [shoes] = useState(data)
return (
div className='container'>
<div className='row'>
{
shoes.map(function(a,i){
return (
<Information shoes={shoes[i]} b={i+1}></Information>
)
})
}