원문: React 앱에서 bootstrap.js 사용하기

본 문서는 원문을 해석한 내용입니다.

Bootstrap v4를 React 앱에서 사용하기

Node.js + creat-reat-app을 통해 만들어진 앱에서, Bootstrap을 사용하는 방식에 대해서는 수많은 논의들이 있다. 이 문서에서는 간단하고 손쉬운 방법을 통해 Bootstrap/jQuery를 이식 하는 방법을 소개한다. 이 방식을 사용할 경우 webpack 설정이나 node modules 설정을 변경할 필요가 없으며, 전체 프로젝트를 다시 구성할 필요도 없다.

실제로 이 방식을 찾아내기 위해서는 수많은 시도를 해보았으며, 많은 사람들이 이 문서를 통해 도움을 받기를 바란다.

Note: 이 문서는 Bootstrap 스크립트를 import하기 위한 방식을 설명한다. react-bootstrap 은 다른 컴포넌트 이므로 다른 문서 를 참조하기 바란다.

세팅 하기

Step 1: 노드 패키지 설치

create-react-app 을 통해 설치된 프로젝트 폴더로 들어간다.
아래의 순서에 따라서 노드 패키지를 설치한다.

필요한 npm 패키지

 
# bootstrap 사용을 위한 의존성 패키지들
npm install tether
npm install jquery
#bootstrap 설치. 최신 npm 버전일 경우 버전 4가 설치된다.
#버전 3에 따른 설정법은 원문을 참조.
npm install bootstrap
npm install popper.js

Step 2: Import 하기

src/ 폴더 안에 include/ 폴더를 생성한다. (src/include/)
src/include/ 폴더에 아래의 파일들을 생성한다.

src/include/jquery.js

 
import * as $ from 'jquery'
window.jQuery = window.$ = $

src/include/popper.js

 
//popper.js is a requirement for bootstrap v4
import Popper  from 'popper.js'
window.Popper = Popper

src/include/tether.js

 
//tether is a requirement for bootstrap v4
import Tether from 'tether'
window.Tether = Tether

src/include/bootstrap.js

 
// bootstrap.js
// This is the main file to import.
// ./jquery.js, ./tether.js, and must be included before the bootstrap package. Order is important.
import './jquery'
import './tether'
import './popper'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

Technical note: 각각의 패키지들에 대한 선언을 파일별로 따로 하는 것이, 향후 순서를 import 순서를 지키는 데에 매우 중요하다. 각각의 의존성을 가진 패키지들이 window 로드 이후 순서대로 할당되도록 도와주어 앞선 패키지에 대한 의존성을 해결해준다. 예를 들어, bootstrap 패키지의 경우 jQuery 코드가 반드시 window.$에 존재해야 한다.

src/include/bootstrap.js 에 정의된 import 순서를 지키지 않을 경우 에러가 발생한다.

Step 3: React 앱에서 사용하기

Step 2까지 완료한 경우 바로 메인 앱에서 사용할 수 있다. 가장 손쉬운 방법은 src/index.js에서 bootstrap을 import 하는 것이다.

src/index.js

 
import React from 'react'
import ReactDOM from 'react-dom'
// Insert this import line in your code:
import './include/bootstrap'
import App from './App'
ReactDOM.render(
  <App />,
  document.getElementById('root'));

위의 코드가 Bootstrap 과 jQuery를 동시에 로드하는 코드의 전부이다.

React 컴포넌트와 JSX에서 Bootstrap 사용하기

가장 최상위 모듈인 index.js 에 Bootstrap을 import했다면, 곧바로 다른 컴포넌트들에서 사용할 수 있다. html에서 곧바로 Bootstrap을 사용하던 것과 달라진 점이라면, React의 규칙을 지키기 위해 class 대신 className 을 사용하는 것이다.

예제

 
class MyComponent extends React.Component {
  render() {
    return (
      <div className="container MyComponent">
        <div className="jumbotron">
          Hello there!
          <button type="button" className="btn btn-primary">
            Bootstrap Button!
          </button>
        </div>
      </div>
    )
  }
}

jQuery 사용하기

Bootstrap 뿐만 아니라 jQuery도 사용하고 싶다면, 간단하게 window 엘리먼트에서 가져와 사용할 수 있다.

보통 jQuery는 화면 렌더링이 모두 끝난 뒤 사용되므로, React와 함께 사용될 때에는 React의 렌더링이 끝난 시점인, componentDidMount(), componentDidUpdate() 혹은 componentWillUnmount() 메소드 내부에서 jQuery 코드를 작성한다.

React에서 jQuery 사용 예제

 
import React from 'react'
// ... other imports here
const $ = window.jQuery
// ... other declarations here
class MyComponent extends React.Component {
  componentDidMount() {
    // Use your jQuery as usual!
    $('#myDiv').css('color', '#f22')
    // Or, if you do not want to declare the global variable $ above:
    window.$('#myDiv').css('color', '#f22')
  }
  render() {
    return (
      <div id="myDiv">Hello, there.</div>
    )
  }
}
export default MyComponent

http://blog.oddicles.org/create-react-app-importing-bootstrap-jquery-cleanly-node-js/#comment-667

Reference: http://kr-blog.gihwan.com/53

저작자표시

MISTERY

[React] React에서 Bootstrap v4 사용하기