[리액트]리액트 부트스트랩으로 컴포넌트 만들기

 

https://react-bootstrap.github.io/

React-Bootstrap

 

부트스트랩 이란?

원래의 부트스트랩은 Boot+strap으로, 긴 부츠의 뒷부분에 달린 고리를 뜻했다. 이것에서 'pull one's own by one's bootstrap'이라는, 불가능한 일을 해낸다는 관용어구가 생겼다. 그리고 그 의미가 변화하여, 도움받지 않고 스스로의 상황을 개선시킨다는 의미가 되었다.

 

소프트웨어 개발에서 사용하는 프레임워크인 부트스트랩과는 사뭇 다른 정의이다.

 

여기서 소개할 부트스트랩이란 CSS와 Javascript로 만든 UI 컴포넌트들이다. 

 

'프레임워크' 라고 하는 것은 재사용이 가능한 요소들의 집합이다. 정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다.

 

부트스트랩 프레임워크는 글자, 인용문, 목록, 표, 입력폼, 버튼, 이미지, 아이콘 등의 자잘한 것뿐만 아니라, 드롭다운 메뉴, 내비게이션 바, 버튼, 탭, 리스트, 페이지 이동 바, 알림 메시지, 썸네일, 진행 바 등의 웹 페이지에서 많이 쓰이는 요소를 거의 전부 내장하고 있다. 이 때문에 웬만한 웹 페이지는 부트스트랩의 CSS와 JavaScript 관련 사항만 설치하고 미리 지정된 CSS 클래스나 JavaScript 함수만 불러오면 트위터에서 쓰는 것과 비슷한 디자인을 순식간에 만들 수 있었다. 다만 v5 최신 버전에서는 트위터의 디자인과는 거리가 멀어졌다.(https://namu.wiki/w/Bootstrap(%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC))

게다가 소스들은 오픈 소스이니, 자유롭게 라이선스를 사용하면 된다.

 

이번 개발에서 리액트 부트스트랩을 사용하였으며, 사용법은 다음과 같다.

 

 

리액트부트스트랩 사용법

(1) 리액트 부트스트랩 설치

npm install react-bootstrap bootstrap

 

 

(2) 공식 홈페이지에서 컴포넌트들을 확인

https://react-bootstrap.github.io/components/alerts

React-Bootstrap

 

공식 홈페이지에서 필요한 컴포넌트들을 확인합니다. 예제와 사용법이 상세히 기재되어 있으니 꼭 확인합니다.

 

 

 

---

버튼 컴포넌트

간단한 버튼부터 만들어 봅시다.

import Button from 'react-bootstrap/Button';

function TypesExample() {
  return (
    <>
	<Button variant="primary">Primary</Button>{' '}
    )
 }
 
 export default TypesExample;

컴포넌트 내용은 위와 같습니다. 

 

1. TypesExample.js 라는 자바스크립트 파일을 만든다.

2. Button 컴포넌트를 import 한다.

 

단순히 리액트부트스트랩 라이브러리를 import하여 다음과 같이 사용할 수 있으니 간편합니다.

 

화면에 나타나는 모습은 위와 같습니다.

Primary라는 속성을 주었는데 파란 버튼으로 나타납니다. 그대로 사용해도 좋지만 커스터마이징 하는 법도 있습니다.

 

 

<Button as="input" type="button" value="Input" />{' '}

as 로 속성을 변경할 수 있습니다.

 

 

 

---

카드 컴포넌트

프로젝트에서 투표할 방송을 고르는 화면입니다. 이곳에서 사용한 카드 컴포넌트의 사용법은 다음과 같습니다.

import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';

function BasicExample() {
  return (
    <Card style={{ width: '18rem' }}>
      <Card.Img variant="top" src="holder.js/100px180" />
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
  );
}

export default BasicExample;

크게 <Card>, <Card.Img>, <Card.Body>로 이루어져있습니다.

Body 안에는 타이틀과 텍스트를 입력할 수 있고, 카드 컴포넌트 내에 버튼을 추가한 모습입니다.

 

이미지는 로컬 폴더에 저장된 이미지를 사용해도 좋고, 따로 웹링크로 변환하여 지정해도 좋습니다.

 

 

 

---

탭 컴포넌트

이번 프로젝트에 적용된 네비게이션 바입니다. 

 

예제 코드를 살펴봅시다.

import Tab from 'react-bootstrap/Tab';
import Tabs from 'react-bootstrap/Tabs';

import Sonnet from '../../components/Sonnet';

function UncontrolledExample() {
  return (
    <Tabs
      defaultActiveKey="profile"
      id="uncontrolled-tab-example"
      className="mb-3"
    >
      <Tab eventKey="home" title="Home">
        <Sonnet />
      </Tab>
      <Tab eventKey="profile" title="Profile">
        <Sonnet />
      </Tab>
      <Tab eventKey="contact" title="Contact" disabled>
        <Sonnet />
      </Tab>
    </Tabs>
  );
}

export default UncontrolledExample;

Tab 컴포넌트에서 title 지정해 주면 탭에 나타나는 제목을 지정할 수 있다.

 

 

---

 

 

막간을 이용하여 캐로우절 컴포넌트를 리액트스트랩과 리액트부트스트랩으로 구현한 코드를 확인해 보겠습니다.

캐로우절이란 ? 
A slideshow component for cycling through elements—images or slides of text—like a carousel.
컴포넌트(이미지 또는 텍스트 슬라이드)를 순환하기 위한 슬라이드쇼 구성 요소입니다.

 

<리액트스트랩>

import React,{ Component } from "react";
import { UncontrolledCarousel } from "reactstrap";

const items = [
    {
        src: "https://ifh.cc/g/opF7KL.jpg",
        altText: 'alternative TExt',
        caption: 'caption',
        header: 'title'
    },
    {
        src: "https://ifh.cc/g/Hq19O8.jpg",
        altText: 'alternative TExt',
        caption: 'caption',
        header: 'title'
    },
];
class R041_ReactstrapCarousel extends Component{
    render() {
        return (
            <UncontrolledCarousel items={items} />
        )
    }
}
export default R041_ReactstrapCarousel;

 

<리액트부트스트랩>

import React, { useState } from 'react';
import Carousel from 'react-bootstrap/Carousel';

function ControlledCarousel() {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  return (
    <Carousel activeIndex={index} onSelect={handleSelect}>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=First slide&bg=373940"
          alt="First slide"
        />
        <Carousel.Caption>
          <h3>First slide label</h3>
          <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Second slide&bg=282c34"
          alt="Second slide"
        />

        <Carousel.Caption>
          <h3>Second slide label</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </Carousel.Caption>
      </Carousel.Item>
      <Carousel.Item>
        <img
          className="d-block w-100"
          src="holder.js/800x400?text=Third slide&bg=20232a"
          alt="Third slide"
        />

        <Carousel.Caption>
          <h3>Third slide label</h3>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </Carousel.Caption>
      </Carousel.Item>
    </Carousel>
  );
}

render(<ControlledCarousel />);

둘 다 속성 값을 정할 수 있고 자바스크립트 문법과 유사함을 확인할 수 있습니다.

 

 

 

---