더 자세한 앱을 만들기 위해 React에 부트스트랩을 설치하는 4가지 방법

로

React와 Bootstrap을 활용한 웹 개발

React는 현대적인 웹 애플리케이션 및 사용자 인터페이스를 구축하는 데 널리 사용되는 자바스크립트 라이브러리입니다. 컴포넌트 기반 구조와 개발 속도, 그리고 활발한 커뮤니티 지원 덕분에 인기가 높습니다. React를 사용하면 재사용 가능한 UI 요소를 만들어 개발 과정을 효율적으로 관리할 수 있습니다.

하지만 React만으로는 시각적으로 매력적인 앱을 만들 수 없습니다. CSS(Cascading Style Sheets)를 적용하여 앱의 디자인을 개선해야 합니다. CSS를 처음부터 작성하는 것은 상당한 시간과 노력이 필요하며, 개발자들이 앱의 핵심 기능 개발보다는 스타일링에 더 많은 시간을 할애하게 만들 수 있습니다.

다행히 Bootstrap과 같은 프레임워크를 활용하면 React 앱에 CSS를 훨씬 쉽게 적용할 수 있습니다. 이런 도구들을 사용하면 개발자는 스타일링 작업 부담을 줄이고 앱의 핵심 기능 개발에 더욱 집중할 수 있습니다.

Bootstrap이란?

Bootstrap은 프론트엔드 개발을 위한 오픈 소스 CSS 프레임워크입니다. 다양한 디자인 도구와 템플릿을 제공하여 모바일 우선의 반응형 웹사이트를 쉽게 만들 수 있게 해줍니다. Bootstrap은 원래 Twitter에서 개발되었으며, 현재는 커뮤니티의 지원을 받으며 꾸준히 발전하고 있습니다. GitHub에서 소스 코드를 확인할 수 있으며, 누구나 버그 보고나 기능 제안을 통해 프로젝트에 기여할 수 있습니다. 최신 버전은 5.3.0-alpha1입니다.

React와 Bootstrap을 함께 사용하는 이유는?

  • 시간 절약: Bootstrap을 사용하면 CSS 스타일링에 필요한 시간을 절약할 수 있습니다. 폼이나 버튼 디자인에 들이는 시간을 줄이고, 데이터 전송과 같은 핵심 기능 개발에 더 집중할 수 있습니다.
  • 사용 편의성: Bootstrap을 React 앱에 추가하면 미리 디자인된 UI 컴포넌트를 쉽게 가져와서 사용할 수 있습니다. 복잡한 UI 요소를 직접 만들 필요 없이 빠르게 개발할 수 있습니다.
  • 일관된 디자인: Bootstrap은 앱 전반에 걸쳐 일관된 스타일을 유지하는 데 도움을 줍니다. 사용자는 앱을 사용할 때 통일감 있는 디자인을 경험할 수 있습니다.
  • 다양한 템플릿: Bootstrap은 다양한 UI 요소 템플릿을 제공합니다. 탐색 모음, 버튼, 폼, 캐러셀 등 수많은 템플릿 중에서 선택하여 사용할 수 있습니다.
  • 쉬운 사용자 정의: Bootstrap의 기본 스타일을 그대로 사용할 수도 있지만, 필요에 따라 글꼴 크기, 색상 등 다양한 요소들을 쉽게 사용자 정의할 수 있습니다.
  • 커뮤니티 지원: Bootstrap은 방대한 문서와 활발한 커뮤니티 지원을 제공합니다. 문제를 해결하거나 새로운 기능을 추가하는 데 도움을 받을 수 있습니다.
  • 반응형 디자인: Bootstrap을 사용하면 웹 앱을 모든 화면 크기에서 일관되게 표시할 수 있습니다. 다양한 기기에서 사용자 경험을 보장합니다.

React 앱에 Bootstrap 설치 방법

React 앱은 기본적으로 Bootstrap을 포함하고 있지 않으므로, 따로 설치해야 합니다. 설치하기 전에 다음 사항들을 확인해야 합니다.

전제 조건

  • Node.js 설치 확인: Node.js는 JavaScript 런타임 환경으로, 브라우저 외부에서 JavaScript 코드를 실행할 수 있게 합니다. 다음 명령을 터미널에 입력하여 Node.js가 설치되어 있는지 확인할 수 있습니다.
node -v

설치되어 있으면 버전 정보가 표시됩니다. 설치되어 있지 않다면 https://nodejs.org/en/ 에서 다운로드하여 설치할 수 있습니다.

  • React 설치 확인: React는 기능을 개발하는 데 사용되며, Bootstrap은 스타일을 적용하는 데 사용됩니다. 다음 명령을 사용하여 React가 설치되어 있는지 확인할 수 있습니다.
npm list react

React가 설치되어 있으면 버전 정보가 터미널에 출력됩니다.

  • React 앱 생성: React 앱을 수동으로 만들 수도 있지만, 많은 작업이 필요합니다. create-react-app 명령어를 사용하여 간편하게 앱을 생성할 수 있습니다.

React 앱을 만드는 단계는 다음과 같습니다.

  • 다음 명령어를 사용하여 create-react-app을 설치합니다.
npm install -g create-react-app
  • 다음 명령어로 React 앱을 만듭니다.
npx create-react-app my-app

my-app 부분은 원하는 앱 이름으로 변경할 수 있습니다. 이 예에서는 react-b로 설정했습니다.

설치가 완료되면 터미널에 비슷한 메시지가 표시됩니다.

이제 다음 명령어를 실행하여 앱을 시작할 수 있습니다.

  • cd react-b (이전 단계에서 지정한 앱 이름)
  • npm start (React 앱을 실행)

이제 React 앱에 Bootstrap을 설치할 준비가 되었습니다.

npm을 사용한 Bootstrap 설치 방법

Node.js를 설치하면 npm(노드 패키지 매니저)이 함께 설치됩니다. npm을 사용하여 Bootstrap을 쉽게 설치할 수 있습니다.

먼저 다음 명령어로 npm 버전을 확인할 수 있습니다.

npm -v

npm이 설치되어 있으면 버전 정보가 표시됩니다.

이제 다음 명령어를 사용하여 Bootstrap을 설치합니다.

npm install bootstrap

설치가 완료되면 ./src/index.js 파일로 이동하여 맨 위에 다음 줄을 추가합니다.

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

Yarn 패키지 매니저 사용

npm과 달리 Yarn은 Node.js를 설치할 때 기본적으로 설치되지 않습니다. Yarn은 npm과 비슷한 기능을 제공하는 패키지 관리자입니다.

다음 명령어를 사용하여 Yarn을 설치할 수 있습니다.

npm install -g yarn

이 명령어는 Yarn을 전역적으로 설치하므로, 이후 앱을 만들 때마다 다시 설치할 필요가 없습니다.

이제 다음 명령어를 실행하여 React 앱에 Bootstrap을 추가합니다.

yarn add bootstrap

설치가 완료되면 ./src/index.js 파일로 이동하여 맨 위에 다음 줄을 추가합니다.

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

다른 CSS 파일보다 먼저 Bootstrap을 가져와야 합니다. 이렇게 하면 필요에 따라 Bootstrap 스타일을 변경하기가 더 쉽습니다.

CDN을 사용한 Bootstrap 설치 방법

CDN(Content Delivery Network) 링크를 사용하여 Bootstrap을 React 앱에 추가할 수도 있습니다. CDN 링크를 사용하면 프로젝트에 직접 파일을 다운로드하고 관리하지 않아도 Bootstrap 라이브러리를 사용할 수 있습니다. 아래와 같이 진행합니다.

  • .public/index.html 파일을 엽니다.
  • <head> 태그 안에 다음 <link> 태그를 추가합니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
  • JavaScript 의존성을 추가해야 합니다. index.html 파일의 <body> 태그가 닫히기 직전에 다음 <script> 태그를 추가합니다.
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

이제 Bootstrap이 React 앱에 성공적으로 설치되었습니다.

React Bootstrap 패키지 사용

위에서 언급한 방식들은 원래 HTML 파일용으로 설계되었습니다. Bootstrap의 드롭다운 예시 코드를 살펴보겠습니다.

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

위 코드에서 class 속성이 사용되었습니다. 하지만 React에서는 JSX 문법을 사용하며, HTML class 속성을 className으로 사용해야 합니다. 따라서 기존 Bootstrap 코드를 그대로 사용할 수 없습니다.

React에서 해당 코드가 정상적으로 작동하도록 하려면 모든 "class"를 "className"으로 바꿔야 합니다. 수정된 코드는 다음과 같습니다.

<div className="dropdown">
  <button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul className="dropdown-menu">
    <li><a className="dropdown-item" href="#">Action</a></li>
    <li><a className="dropdown-item" href="#">Another action</a></li>
    <li><a className="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

다행히도, react-bootstrap 및 reactstrap과 같은 라이브러리를 사용하면 위와 같은 수동적인 수정 작업을 피할 수 있습니다.

React-Bootstrap

React-Bootstrap은 React 컴포넌트 기반으로 개발된 라이브러리입니다. Bootstrap 코어와 호환성이 높습니다.

React-Bootstrap을 사용하려면 다음 단계를 따릅니다.

  • 다음 명령어로 React-Bootstrap을 설치합니다.
npm install react-bootstrap bootstrap
  • src/index.js 또는 App.js 파일에서 다른 CSS 파일보다 먼저 다음 줄을 추가합니다.

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

React-Bootstrap을 사용하면 전체 라이브러리 대신 특정 컴포넌트만 가져와 사용할 수 있습니다. 예를 들어 버튼 컴포넌트가 필요하다면 다음과 같이 가져올 수 있습니다.

import { Button } from 'react-bootstrap';

Reactstrap

Reactstrap은 React 컴포넌트 라이브러리로, Bootstrap CSS 프레임워크를 스타일링에 활용합니다. 이 라이브러리를 사용하면 올바른 Bootstrap 클래스를 React 앱으로 가져올 수 있으며, 앱 스타일을 일관적으로 유지하는 데 도움이 됩니다. 또한, Bootstrap의 JavaScript 파일을 따로 추가할 필요가 없습니다.

Reactstrap을 React 앱에 추가하려면 다음 단계를 따릅니다.

  • 다음 명령어로 Reactstrap을 설치합니다.
npm install reactstrap react react-dom
  • 다음 명령어를 사용하여 Bootstrap을 설치합니다.
npm install --save bootstrap

import 'bootstrap/dist/css/bootstrap.min.css'; (app.js 파일에 추가)

또는 CDN 링크 옵션을 사용하여 앱에 Bootstrap을 포함시킬 수도 있습니다. 첫 번째 단계 이후, 루트 디렉토리로 이동하여 .public/index.html 파일을 열고 다음 줄을 <head> 태그에 추가합니다.

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
/>

Reactstrap을 사용하면 전체 라이브러리 대신 특정 컴포넌트만 가져와 사용할 수 있습니다. 예를 들어 버튼 컴포넌트가 필요하다면 다음과 같이 가져올 수 있습니다.

import { Button } from 'reactstrap';

결론

위에서 설명한 방법들은 React 앱에 Bootstrap을 설치하고 웹 앱을 스타일링하는 데 사용할 수 있는 다양한 방법들입니다. 각각의 방법은 장단점이 있지만, 최종 목표는 동일하므로 선호하는 방식을 선택하여 사용하면 됩니다.

React와 Bootstrap을 함께 사용하면 CSS 스타일을 추적하는 번거로움에서 벗어나 앱의 핵심 기능 개발에 더 집중할 수 있습니다. 앱의 기능 개발에 집중할수록 앱 스타일링은 더욱 쉽고 효율적이 될 것입니다.

모바일 앱 개발을 위해 React Native를 선택해야 하는 몇 가지 이유를 살펴볼 수도 있습니다.