[리액트 React] 실무에서 유용하게 사용되는 reactstrap Button Group

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

이번 포스팅에서는 리액트로 웹을 구축할 때

실무에서 유용하게 사용되는 reactstrap Button Group에 대해 다뤄볼게요.

 

지금부터는 가독성을 위해 문어체를 사용하여 작성하도록 하겠습니다!

 

 

✋🏼 잠깐만! 이 글을 보기 전에, reactstrap 설치는 했나요?

아니라면 해당 링크를 눌러 reactstrap을 설치하기

[리액트 React] reactstrap 사용하는 법 / reactstrap 실무에서 사용하는 기능 공유

 

1. App.js 작성하기

import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import ButtonGroup from './ButtonGroup';

function App() {
	return(
		<div>
			<ButtonGroup />
		</div>
	)
}

export default App;

 

 

2. 클래스형 컴포넌트 ButtonGroup.js 작성하기

import React, { Component } from 'react';
import { Button, ButtonGroup } from 'reactstrap';

class ButtonGroup extends Component {
    constructor(props) {
        super(props);
        this.state = { number: 0 }
    }

    move = (type, e) => {
        if(type === 'Minus') {
            this.setState({number: this.state.number - 1})
        } else if(type === 'Plus') {
            this.setState({number: this.state.number + 1})
        } else {
            this.setState({number: 0})
        }
    }

    render() {
        return (
            <div>
                <ButtonGroup style={{padding: '0px'}}>
                    <Button onClick={e => this.move('Minus')}>-</Button>
                    <Button onClick={e => this.move('Reset')}>Reset</Button>
                    <Button onClick={e => this.move('Plus')}>+</Button>
                </ButtonGroup>
                <br/>{this.state.number}
            </div>
        )
    }
} 

export default ButtonGroup;

 

 

2-2. 함수형 컴포넌트 ButtonGroup.js 작성하기

import React, { useState } from 'react';
import { Button, ButtonGroup } from 'reactstrap';

function ButtonGroups() {

    const [ number, setNumber ] = useState(0);

    function move (type, e) {
        if(type === 'Minus') {
            setNumber(number - 1)
        } else if(type === 'Plus') {
            setNumber(number + 1)
        } else {
            setNumber(0)
        }
    }


    return (
        <div>
            <ButtonGroup>
                <Button onClick={e => move('Minus')}>-</Button>
                <Button onClick={e => move('Reset')}>Reset</Button>
                <Button onClick={e => move('Plus')}>+</Button>
            </ButtonGroup>
            <br/>{number}
        </div>
    )
} 

export default ButtonGroups;

 

 

3. 브라우저 확인

- 를 누르면 현재값에서 -1이 되고, +를 누르면 현재값에서 +1이 되고, Reset을 누르면 0이 된다.

 

 

4. 출처 및 추가내용

해당 링크를 들어가면, ButtonGroup의 다양한 예제를 확인할 수 있다.

reactstrap - Button Group