<div id="readability-page-1" class="page"><div class="page" title="Page 1">
<p>현재 React 에서 Bootstrap 을 사용할 수 있게끔 제작된 프로젝트는 <strong>React-Bootstrap</strong> 과 <strong>Reactstrap</strong> 두가지가 있다. 본 글에서는 Bootstrap4 기반의 <a href="https://reactstrap.github.io/"><strong>Reactstrap</strong></a> 을 소개한다.</p>
<h2>Reactstrap</h2>
<p><strong>Jquery 기반의 Bootstrap 를 React 환경으로 이식한 프로젝트이다.</strong> 기존의 Div 엘리먼트에 Class 를 설정하여, 컴포넌트를 구분하는 방식에서, Bootstrap 컴포넌트별로 React 컴포넌트가 구현되어 더욱 <strong>React 스러운 개발</strong>이 가능하다.</p>
<h2>사용하기</h2>
<pre><code>npm install --save reactstrap bootstrap</code></pre>
<p>reactstrap 모듈과 bootstrap 을 설치한다.</p>
<pre><code>import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    return (
      &lt;div className="App"&gt;
        &lt;Button color="danger"&gt; Danger! &lt;/Button&gt;
      &lt;/div&gt;
    );
  }
}

export default App;
</code></pre>
<p>reactstrap 모듈로부터 Button 컴포넌트와 bootstrap.min.css 파일을 import 해준다. 그리고 일반 컴포넌트 쓰듯이 사용해주면 된다. 기존 부트스트랩은 컴포넌트의 여러 속성을 Class 에 써 넣어주었으나, Reactstrap 에서는 <strong>Prop 에 속성처럼</strong> 넣어준다. 더 직관적인 모습을 볼 수 있다.</p>
<h2>상태(State) 변경</h2>
<p>원래의 부트스트랩에서 Modal 등의 Javascript 가 필요한 컴포넌트를 사용하기 위해서는 Jquery 기반으로 제작된 <strong>bootstrap.js</strong> 을 포함해야한다. Reactstrap 은 이벤트와 컴포넌트의 prop을 state 로 직접 관리해줘야한다.</p>
<pre><code>import React, { Component } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      modal: false
    }

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    })
  }

  render() {
    return (
      &lt;div className="App"&gt;
        &lt;Button color="info" onClick={this.toggle}&gt; 모달 열기 &lt;/Button&gt;
        &lt;Modal isOpen={this.state.modal} toggle={this.toggle}&gt;
          &lt;ModalHeader toggle={this.toggle}&gt;Modal title&lt;/ModalHeader&gt;
          &lt;ModalBody&gt;
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          &lt;/ModalBody&gt;
          &lt;ModalFooter&gt;
            &lt;Button color="primary" onClick={this.toggle}&gt;확인&lt;/Button&gt;{' '}
            &lt;Button color="secondary" onClick={this.toggle}&gt;취소&lt;/Button&gt;
          &lt;/ModalFooter&gt;
        &lt;/Modal&gt;
      &lt;/div&gt;
    );
  }
}

export default App;</code></pre>
<p>위 예제에서 Modal 컴포넌트의 표시 여부를 <strong>isOpen 이라는 Prop</strong>으로 관리한다.</p>
<h2>HTML 속성 사용</h2>
<p>class 나 value 같은 HTML 에서 사용되는 속성도 동일하게 Reactstrap 컴포넌트에 적용된다.</p>
<pre><code>&lt;Button className="custom-btn"&gt;구매 확정!&lt;/Button&gt;

&lt;Input type="number" value={ this.props.number } /&gt;</code></pre>
<h2>참고</h2>
<ul>
<li><strong><a href="https://reactstrap.github.io/components/">https://reactstrap.github.io/components/</a></strong> – Reactstrap의 컴포넌트를 볼 수 있다.</li>
<li><strong><a href="https://github.com/reactstrap/reactstrap">https://github.com/reactstrap/reactstrap</a></strong></li>
</ul>
</div></div>

Hudi – 유사 프로그래머

현재 React 에서 Bootstrap 을 사용할 수 있게끔 제작된 프로젝트는 React-Bootstrap 과 Reactstrap 두가지가 있다. 본 글에서는 Bootstrap4 기반의 Reactstrap 을 소개한다.
Reactstrap
Jquery 기반의 Bootstrap 를 React 환경으로 이식한 프로젝트이다. 기존의 Div 엘리먼트에 Class 를 설정하여, 컴포넌트를 구분하는 방식에서, Bootstrap 컴포넌트별로 React 컴포넌트가 구현되어 더욱 React 스러운 개발이 가능하다.
사용하기
npm install --save reactstrap bootstrap
reactstrap 모듈과 bootstrap 을 설치한다.
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <Button color="danger"> Danger! </Button>
      </div>
    );
  }
}
export default App;
reactstrap 모듈로부터 Button 컴포넌트와 bootstrap.min.css 파일을 import 해준다. 그리고 일반 컴포넌트 쓰듯이 사용해주면 된다. 기존 부트스트랩은 컴포넌트의 여러 속성을 Class 에 써 넣어주었으나, Reactstrap 에서는 Prop 에 속성처럼 넣어준다. 더 직관적인 모습을 볼 수 있다.
상태(State) 변경
원래의 부트스트랩에서 Modal 등의 Javascript 가 필요한 컴포넌트를 사용하기 위해서는 Jquery 기반으로 제작된 bootstrap.js 을 포함해야한다. Reactstrap 은 이벤트와 컴포넌트의 prop을 state 로 직접 관리해줘야한다.
import React, { Component } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    }
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState({
      modal: !this.state.modal
    })
  }
  render() {
    return (
      <div className="App">
        <Button color="info" onClick={this.toggle}> 모달 열기 </Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>확인</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>취소</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}
export default App;
위 예제에서 Modal 컴포넌트의 표시 여부를 isOpen 이라는 Prop으로 관리한다.
HTML 속성 사용
class 나 value 같은 HTML 에서 사용되는 속성도 동일하게 Reactstrap 컴포넌트에 적용된다.
<Button className="custom-btn">구매 확정!</Button>
<Input type="number" value={ this.props.number } />
참고
https://reactstrap.github.io/components/ – Reactstrap의 컴포넌트를 볼 수 있다.
https://github.com/reactstrap/reactstrap
The post Reactstrap – Bootstrap4를 React에서 사용하는 방법 appeared first on Hudi - 유사 프로그래머.

Reactstrap – Bootstrap4를 React에서 사용하는 방법

댓글