ReactJS 디자인 초보를 위한 부트스트랩 사용하기

1. 개요

• 리액트로 웹페이지 만들어보고싶은데 디자인똥손이라면
• 리액트 부트스트랩을 사용하면 이미 예쁘게 만들어진 디자인을 가져다 쓸 수 있음

2. 설치하는 방법

npm install react-bootstrap bootstrap

• 위 명령어 입력해서 부트스트랩 설치

3. 사용법

import 'bootstrap/dist/css/bootstrap.min.css';

• app.js파일에 위 코드 삽입하면 셋팅 끝

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

React-Bootstrap

 

• 위 사이트에 접속해서 다양한 컴포넌트 예제를 복붙하면 됨

import {Button, Navbar, Container, Nav} from 'react-bootstrap'

• 참고로 위 예시 코드처럼 컴포넌트 관련 코드도 삽입해줘야 함
• 이런건 리액트 부트스트랩 사이트에서 복붙하면 됨
• 다른 코드 추가할때는 그냥 중괄호{} 안에다가 추가해주면 됨

import Button from 'react-bootstrap/Button';

function TypesExample() {
  return (
    <>
      <Button variant="primary">Primary</Button>{' '}
      <Button variant="secondary">Secondary</Button>{' '}
      <Button variant="success">Success</Button>{' '}
      <Button variant="warning">Warning</Button>{' '}
      <Button variant="danger">Danger</Button>{' '}
      <Button variant="info">Info</Button>{' '}
      <Button variant="light">Light</Button>{' '}
      <Button variant="dark">Dark</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

export default TypesExample;

• 이건 예제인데, 위 코드를 복붙하고 컴포넌트 처럼 쓰면 버튼이 만들어짐

import {Button} from 'react-bootstrap'

function App(){
    let [글제목, 글제목변경] = useState(['1번제목','2번제목']);
    return(
        <div>
            <Babycomponent/>
            <TypesExample/>
        </div>
    )
}

function Babycomponent(props)){
    return(
        <div>
            <h3>{props.글제목[0]}</h3>
        </div>
    )
}

function TypesExample() {
  return (
    <>
      <Button variant="primary">Primary</Button>{' '}
      <Button variant="secondary">Secondary</Button>{' '}
      <Button variant="success">Success</Button>{' '}
      <Button variant="warning">Warning</Button>{' '}
      <Button variant="danger">Danger</Button>{' '}
      <Button variant="info">Info</Button>{' '}
      <Button variant="light">Light</Button>{' '}
      <Button variant="dark">Dark</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

• 이렇게 쓰면 됨
• 예제 코드에 있던 import Button from 'react-bootstrap/Button';은 import {button} from 'react-bootstrap';으로 바꿨고
• export default TypesExample;은 다른 JS파일에 별도로 컴포넌트를 만들었을때 export해주는 코드인데, TypesExpample 컴포넌트랑 이 컴포넌트를 사용하는 컴포넌트가 같은 파일에 있으니 export 할 필요가 없어서 삭제해줬음