React

React-BootStrap

부트스트랩을 이용하면 CSS를 좀더 편리하게 사용할 수 있다.
설치
npm install react-bootstrap bootstrap

https://react-bootstrap.netlify.app/docs/components 리액트 부트스트랩 라이트

라이브러를 import하고, 필요한 컴포넌트를 리액트-부트스트랩 사이트에서 찾아 사용하면 된다.

ex) 버튼

import { Button } from "react-bootstrap";

function App() {
  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>
    </>
  );
}

다음과 같이 react-bootstrap에서 Button을 임포트해오면, 다양한 버튼들을 다양한 속성과 함께 사용할 수 있다.

React Router DOM

리액트에서 URL에 따른 라우팅 기능을 사용하기 위해 사용한다.
MPA(멀티 페이지 어플리케이션) 방식에서는 여러 페이지를 분리해두고, 페이지간의 이동으로 라우트 시스템을 구축하지만, SPA(싱글 페이지 어플리케이션)방식의 리액트에서는 React Router를 사용한다.

설치
npm i react-router-dom

• Routes : 여러 Route를 감싸서 그 중에 해당하는 Route를 렌더링 해준다.
• Route : path와 element 속성을 통해 경로와, 보여줄 컴포넌트를 설정할 수 있다.
• Link : a태그를 통해 브라우저를 이동하면 페이지를 새로 불러오기 때문에 Link를 사용해야한다.