React는 단일 페이지 애플리케이션 및 사용자 인터페이스를 구축하기 위한 가장 인기 있는 JavaScript 프레임워크 및 라이브러리 중 하나입니다. 재사용 가능한 구성 요소를 사용하여 사용자 인터페이스를 구축하는 유연성, 개발 속도 및 지원 커뮤니티가 인기의 이유입니다.
그러나 React는 CSS(Cascading Style Sheets)와 결합하여 앱을 시각적으로 더 매력적이고 표현 가능하게 만들어야 합니다. 처음부터 CSS를 작성하는 것은 시간이 오래 걸릴 수 있습니다.
개발자는 React 앱의 주요 기능 대신 스타일링 작업에 많은 시간을 할애할 수 있습니다. 좋은 소식은 Bootstrap과 같은 도구와 프레임워크를 사용하면 React 앱에 CSS를 더 쉽게 추가할 수 있다는 것입니다.
목차
부트스트랩이란 무엇입니까?
부트스트랩은 프론트엔드 개발을 위한 오픈 소스 CSS 프레임워크입니다. 부트스트랩을 사용하면 개발자는 포괄적인 JavaScript 및 CSS 기반 디자인 도구 및 템플릿 세트를 통해 응답성이 뛰어난 모바일 우선 웹사이트를 만들 수 있습니다.
부트스트랩은 Twitter에서 만들었으며 같은 회사의 엔지니어 팀에서도 유지 관리합니다. 소스 코드는 GitHub에서 유지 관리되며 커뮤니티 구성원은 버그 보고서 및 제안에 기여하고 보낼 수 있습니다. 부트스트랩 5.3.0-alpha1은 작성 시점을 기준으로 가장 최신 버전입니다.
React와 부트스트랩을 사용하는 이유는 무엇입니까?
- 시간 절약: 부트스트랩이 서식을 처리하여 기능에 집중할 수 있는 시간을 더 많이 줍니다. 따라서 양식이나 버튼의 모양과 같은 문제에 대해 걱정할 필요가 없지만 제출 버튼이 백엔드 또는 API로 데이터를 전송하는지 여부와 같은 영역에 대해 걱정할 필요가 없습니다.
- 사용 편의성: 부트스트랩을 React 앱에 추가한 후 미리 디자인된 UI 구성 요소를 가져와서 앱에 추가하기만 하면 됩니다.
- 일관된 디자인: 대부분의 앱은 시간이 지남에 따라 크기가 커집니다. 충성도 높은 사용자를 유치하려면 웹 사이트의 일관된 디자인을 보장하는 것이 중요합니다. 부트스트랩은 페이지에 균일한 모양을 제공하는 일관된 스타일을 가지고 있습니다.
- 선택할 수 있는 수많은 템플릿: 부트스트랩에는 탐색 모음, 버튼, 양식 및 캐러셀에서 드롭다운에 이르기까지 수백 가지 템플릿 중에서 선택할 수 있습니다.
- 용이한 사용자 정의: Bootstrap에는 디자인 템플릿이 있지만 필요에 따라 글꼴 크기, 색상 및 기타 기능을 사용자 정의할 수 있습니다.
- 커뮤니티 지원: Bootstrap에는 시작하는 데 도움이 되는 광범위한 문서가 있습니다. 그러나 항상 새로운 기능을 추가하고 이 CSS 프레임워크를 유지하면서 큰 커뮤니티에 돈을 쓸 수 있습니다.
- 반응형 디자인: 부트스트랩을 React 앱에 추가하면 웹 앱이 모든 화면 크기에서 반응할 것임을 확신할 수 있습니다.
React에 Bootstrap을 설치하는 방법
React 앱은 기본적으로 Bootstrap이 설치된 상태로 제공되지 않습니다. 그러나 React에서 Bootstrap을 추가/설치하는 방법을 탐색하기 전에 몇 가지 사항을 확인해야 합니다.
전제 조건
이 명령을 사용하여 node.js가 PC에 설치되어 있는지 확인하십시오.
node -v
node.js가 설치된 경우 터미널에 이와 유사한 출력이 표시됩니다.
노드 버전
설치되지 않은 경우 https://nodejs.org/en/에서 다운로드 지침을 확인할 수 있습니다.
이 명령을 사용하여 React가 PC에 설치되어 있는지 확인하십시오.
npm list react
React가 시스템에 전체적으로 설치되어 있으면 터미널에 이와 같은 것이 있을 것입니다.
반응 버전
- 시스템에 react-create-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 설치 부트스트랩 방법
Node.js는 기본적으로 설치된 npm(노드 패키지 관리자)과 함께 제공됩니다.
다음 명령을 통해 npm 버전을 확인할 수 있습니다.
npm -v
npm이 설치되어 있으면 9.2.0과 같은 출력이 나옵니다.
이제 다음 명령을 사용하여 부트스트랩을 설치할 수 있습니다.
npm install bootstrap
완료되면 ./src/index.js 파일로 이동합니다. 이 줄을 맨 위에 추가하십시오.
import ‘bootstrap/dist/css/bootstrap.css’;
원사 패키지 관리자 사용
npm과 달리 node.js를 설치할 때 yarn은 기본적으로 설치되지 않습니다.
이 명령을 사용하여 야드를 설치하십시오.
npm install -g yarn
이 명령은 Yarn을 전체적으로 설치하므로 더 이상 React 앱을 만들 때마다 패키지를 설치할 필요가 없습니다.
다음 명령을 실행하여 React에 부트스트랩을 추가합니다.
yarn add bootstrap
완료되면 ./src/index.js 파일로 이동합니다. 이 줄을 맨 위에 추가하십시오.
import ‘bootstrap/dist/css/bootstrap.css’;
다른 CSS 파일보다 먼저 앱의 항목 파일 상단에서 항상 부트스트랩을 가져와야 합니다. 이렇게 하면 React 앱을 만들 때 템플릿의 기본값을 변경해야 하는 경우 부트스트랩 항목을 쉽게 변경할 수 있습니다.
CDN 방식
CDN(Content Delivery Network) 링크를 사용하여 Bootstrap을 React에 추가할 수 있습니다. 이 CDN 링크를 추가하면 프로젝트 폴더에서 파일을 다운로드하고 호스팅하지 않고도 Bootstrap 라이브러리를 React 앱에 포함할 수 있습니다. 다음과 같이하세요.
- 루트 폴더에서 .public/index.html 파일로 이동합니다.
- 태그에 이 태그를 추가합니다.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- 앱에 JavaScript 종속성을 추가해야 합니다. index.html 파일의 본문으로 이동하여 닫는 태그 바로 앞에 이 태그를 추가합니다.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap이 최종적으로 React 앱에 설치됩니다.
React 부트스트랩 패키지 사용
지금까지 다룬 접근 방식은 원래 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>
코드에 어떤 문제가 있습니까? 부트스트랩은 기본적으로 클래스를 사용하여 디비전(DIV)을 분류합니다. 그러나 React는 camelCase 구문을 사용하는 JSX를 사용합니다. 따라서 클래스를 className으로 수동으로 교체해야 합니다.
해당 코드가 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 구성 요소가 있습니다. 라이브러리는 부트스트랩 코어와 호환됩니다.
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’;
리액트스트랩
Bootstrap용 React 구성 요소 라이브러리입니다. Reactstrap은 스타일과 테마를 위해 Bootstrap CSS 프레임워크를 사용합니다. 이 라이브러리는 올바른 Bootstrap 클래스를 React 앱으로 가져오므로 일관된 앱 스타일을 지정할 수 있습니다. 또한 기능을 트리거하기 위해 Bootstrap의 JavaScript 파일을 추가할 필요가 없습니다.
Reactstrap을 React 앱에 추가하려면 다음 단계를 따르세요.
- 다음 명령을 통해 Reactstrap을 설치합니다.
npm install reactstrap react react-dom
- 다음 명령을 사용하여 부트스트랩을 가져옵니다.
npm install --save bootstrap
import ‘bootstrap/dist/css/bootstrap.min.css’; (이 줄을 app.js에 추가)
CDN 링크 옵션을 사용하여 앱에 부트스트랩을 포함할 수도 있습니다. 첫 번째 단계 후 루트 디렉토리로 이동하여 .public/index.html 파일로 이동하고 이 줄을
태그에 추가합니다.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
Reactstrap을 사용하면 전체 라이브러리 대신 특정 구성 요소를 가져올 수 있습니다. 예를 들어 구성 요소 중 하나에서 버튼을 가져와야 하는 경우 다음과 같이 가져올 수 있습니다.
import { Button } from ‘reactstrap’;
결론
위는 React 앱에 Bootstrap을 설치하여 웹 앱의 스타일을 지정하는 데 사용할 수 있는 몇 가지 접근 방식입니다. 최종 목표가 동일하므로 설치 방식의 선택은 기본 설정의 문제입니다.
React와 Bootstrap을 결합하면 앱이 성장함에 따라 모든 CSS 스타일을 추적해야 하는 고통에서 벗어날 수 있습니다. 기능에 집중하는 데 더 많은 시간을 할애할수록 앱 스타일링이 쉽고 효율적이 됩니다.
모바일 앱 개발을 위해 React Native를 선택해야 하는 몇 가지 이유를 살펴볼 수 있습니다.