이전 포스팅에서 Component, State, Props의 개념을 아주 약간 맛봤습니다. Reactful한 페이지를 만들었다는 데 일단 축하한다는 말씀을 드립니다. 이번에는 react-bootstrap이라는 React UI 라이브러리를 사용해보겠습니다. bootstrap이 무엇인지 모르는 분도 있을 수 있어 간단하게 설명드리자면, 블로그 스킨 같은 겁니다. 근데 특별한 identitiy가 있다기보다 누가 봐도 깔끔한 느낌이 들도록 하는 스킨같은 겁니다. 기존에 HTML + CSS를 사용했다면 그냥 bootstrap.min.css를 다운로드 받아 html파일에 적용하는 것만으로 bootstrap을 사용할 수 있었습니다. 그러나 React에서는 별개의 패키지를 설치해서 적용해야 기존 html에서 booststrap을 적용하던 그 경험을 그대로 가져올 수 있습니다.
react-bootstrap, reactstrap
React에서 bootstrap을 경험하고 싶다면 react-bootstrap, reactstrap 두 가지의 선택지가 있습니다. 둘 다 써 본 결과 경험상 react-bootstrap이 조금 더 직관적이라 해야 하나..? 쓰기 더 편했습니다. 이 포스팅에서도 마찬가지로 react-bootstrap을 사용하도록 합니다.
단순한 카운터와 텍스트필드입니다. 근데 이제 react-bootstrap을 곁들인
기존 프로젝트에 바로 적용해보겠습니다. /client에서 npm i react-bootstrap bootstrap을 통해 설치해줍니다.
설치가 완료되었다면 /client/src/components/FormTest.js를 수정해줍니다.
//client/src/components/FormTest.js
import React, { useState } from "react";
//사용할 요소에 대한 컴포넌트를 react-bootstrap에서 import합니다
import Form from "react-bootstrap/Form";
import Button from "react-bootstrap/Button";
const FormTest = (props) => {
const [counter, setCounter] = useState(0);
const [text, setText] = useState("");
const handleChange = (e) => {
setText(e.target.value);
};
const handleAdd = (e) => {
setCounter(counter + 1);
};
const handleSubtract = (e) => {
setCounter(counter - 1);
};
return (
<div>
{/* react-bootstrap을 적용할 요소의 태그 이름을 변경합니다. */}
<Form.Control type="text" value={text} onChange={handleChange} />
<h1>{props.title}</h1>
<div>{counter}</div>
<Button variant="info" onClick={handleAdd}>
+
</Button>
<Button variant="success" onClick={handleSubtract}>
-
</Button>
</div>
);
};
export default FormTest;react-bootstrap은 bootstrap을 적용하고 쉽게 커스터마이징할 수 있도록 하기 위한 중간 연결다리일 뿐입니다. 페이지를 깔끔하게 꾸미기 위해서라면 bootstrap.min.css도 필요합니다. /client/public/index.html 파일 <head> 태그 안에 다음의 내용을 추가함으로서 CDN을 통해 bootstrap.min.css를 받아오도록 합니다.
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
Done!
react-bootstrap을 적용해봤습니다. 버튼이나 input 말고도 다양한 형태의 요소가 Component로 제공되니 아래 페이지에 접속해 좀 더 다양한 방식으로 react 프로젝트에 bootstrap을 적용할 수 있습니다. 페이지를 만드는 것보다 UI 프레임워크를 미리 소개시켜드린 이유는, 리액트의 경우 페이지를 만들고 이런 UI 라이브러리를 적용하게 되었을 때 프로젝트를 완전히 갈아 엎어야 하는 불상사가 생기기 때문이었습니다. 혹여 bootstrap이 별로 마음에 들지 않는다면 React용으로 나온 다른 UI 라이브러리를 사용할 수도 있습니다. 대표적으로 MaterialUI, SemanticUI 같은 것들이 있습니다.
React-Bootstrap
The most popular front-end framework, rebuilt for React.
react-bootstrap.github.io
긴 글 읽어주셔서 감사합니다. 글이 도움이 되셨다면 공감 + 광고 클릭 부탁드립니다. 고마움을 표현하는 가장 쉬운 방법입니다.
