웹 페이지를 디자인하는데는 많은 툴이 있다.
순수 CSS를 쓰는 방법도 있고, Ant Design, 부트스트랩, 요새 급 부상하고 있는 TailWind 등 선택의 여지가 많다. 나는 아직까지 많은 사람들이 사용하고 있고, 적용되어 있는 페이지도 많은 부트스트랩을 선택해 사용하고자 한다.
1. 프로젝트에 리액트 부트스트랩 적용하기
나는 나만의 블로그를 만드는 프로젝트를 진행중인데, 리액트 부트스트랩에서 Card항목을 가져와 내 프로젝트에 적용시켜보려고 한다.
우선 터미널을 열고 아래 명령어를 입력한다.
npm install react-bootstrap bootstrap@5.1.3
이후에 App.js 파일 혹은 index.js 파일에 아래 코드를 추가해준다. bootstrap에서 제공하는 css를 적용하기 위함이다.
import 'bootstrap/dist/css/bootstrap.min.css';
2. Card 사용하기
Card를 사용하기 위해 PostCard컴포넌트를 추가해준다. 현재 프로젝트 구성은 아래와 같다.
- PostCard.js
import { Card } from 'react-bootstrap'
import img from "../../img/cover_img.png"
function PostCard(props) {
return (
<Card style={{ width: '18rem' }}>
<Card.Img variant="top" src={img}/>
<Card.Body>
<Card.Title>{props.title}</Card.Title>
</Card.Body>
</Card>
)
}
export default PostCard
Card라는 이미 만들어져 있는 컴포넌트를 불러와서 사용한다고 생각하면 된다. img는 내가 따로 추가해둔 이미지인데 자신이 원하는 이미지로 설정해서 사용하면 되겠다.
내가 Card에서 필요한 항목은 지금 이미지와 Title밖에 없다고 생각해 두가지만 적용했는데 부트스트랩에서 제공하는 카드에는 다른 기능도 여러가지 있다. 공식문서를 참고해서 기능을 알아두면 자신이 원하는대로 사용하기 편할 것이다.
props를 사용한 이유는 블로그를 만들다보니 카드의 Title이 유동적으로 변경될 것이기 때문에 부모에서 넘겨주는 방식을 선택했다.
이제 만든 컴포넌트를 다른 화면에서 사용해보자
- Home.js
import PostCard from '../components/Postcard/PostCard'
const titleData = [
{
title: '자바스크립트 공부 1',
text: '자바스크립트 공부시작...'
},
{
title: '자바스크립트 공부2',
text: '자바스크립트 공부 2일차...'
}
]
function Home() {
return (
<div style={{ display: 'flex', margin: '80px 0 0 100px' }}>
<PostCard title={titleData[0].title}></PostCard>
<PostCard title={titleData[1].title}></PostCard>
</div>
)
}
export default Home
PostCard를 import 해와서 사용한 예시이다. titleData같은 경우 나중에 API에서 json형식으로 파싱해올 것이기 때문에 더미데이터를 만들어서 사용했다. PostCard의 title을 props로 넘겨주는 방식을 잘 기억하도록 하자.
- Project.js
import PostCard from '../components/Postcard/PostCard'
const titleData = [
{
title: '리액트 프로젝트 시작하기',
text: 'create-react-app'
},
{
title: '리액트 프로젝트 2일차',
text: '컴포넌트 만들기'
}
]
function Project() {
return(
<div style={{ display: 'flex', margin: '80px 0 0 100px' }}>
<PostCard title={titleData[0].title}></PostCard>
<PostCard title={titleData[1].title}></PostCard>
</div>
)
}
export default Project
위와 마찬가지다.
이제 실행 해보자!
성공 !
react-bootstrap 공식문서를 보면 다른 유용한 컴포넌트들도 많으니 꼭 들어가서 확인해보길 바란다.
'FullStack > React-React Native' 카테고리의 다른 글
[React] SPA란? 리액트 라우터를 사용해서 페이지 이동하기 (React Router) (0) | 2022.01.20 |
---|---|
[React] 리액트 헤더 컴포넌트 만들기 (React Header Component) (0) | 2022.01.19 |
[React] 리액트 컴포넌트란? (React Component) (0) | 2022.01.19 |
[React] create-react-app으로 리액트 개발 시작하기 (1) | 2022.01.15 |
댓글