React Style

React 에서 스타일링하는 방법을 알아봅니다.

React 에서 스타일링 하는 방법

•

inline style 

•

import CSS 

•

import CSS Module 

•

styled-components 

•

BootStrap

•

React-BootStrap

inline style

컴포넌트에 style 속성에 직접 스타일 속성을 정의하는 방법

문법

<컴포넌트 style={ { 속성1 : '값1', 속성2: '값2' } } />
JavaScript
복사

컴포넌트의 style 속성을 정의하여 { } 표현식 안에서, { } 객체의 형태로 스타일을 지정합니다.

•

스타일 속성 : 일반적으로 CSS 스타일 시트에서는 스타일 속성을 케밥 케이스(”style-property”) 로 지정하지만, React 의 스타일 속성은 카멜 케이스(”styleProperty”) 로 지정합니다.

•

스타일 값 : ‘값’ 또는  “값” 따옴표로 묶어서 지정합니다.

예시 코드

인라인 스타일을 적용하여 버튼을 만들어 봅니다.

기본 버튼

Button.jsx

import React from 'react'

const Button = () => {
  return (
    <button style={{
        backgroundColor: 'royalblue',
        color: 'white',
        fontWeight: 'bold',
        outline: 'none',
        border: 'none',
        margin: '0 2px',
        padding: '10px 24px',
        borderRadius: '6px',
        cursor: 'pointer',
    }}>Button</button>
  )
}

export default Button
JavaScript
복사

커스텀 버튼

CustomButton.jsx

import React from 'react'

const CustomButton = ({ text, btnStyle, btnSize, onClick }) => {

    let color = 'white';
    let backgroundColor = 'black';
    let padding = '12px 24px';
    let display = 'inline-block';
    let fontSize = '14px';
    let width = 'auto';
    let margin = '0 4px';

    switch (btnStyle) {
        case 'primary': backgroundColor = '#007BFF';  break;
        case 'secondary': backgroundColor = '#6C757D';  break;
        case 'success': backgroundColor = '#28A745';  break;
        case 'danger': backgroundColor = '#DC3545';  break;
        case 'warning': backgroundColor = '#FFC107'; color = 'black';  break;
        case 'info': backgroundColor = '#17A2B8';  break;
        case 'light': backgroundColor = '#F8F9FA'; color = 'black';  break;
        case 'dark': backgroundColor = '#343A40';  break;
        default: break;
    }

    switch (btnSize) {
        case 'xs': padding = '2px 8px'; fontSize = '10px'; break;
        case 'sm': padding = '6px 12px'; fontSize = '12px'; break;
        case 'md': padding = '12px 24px'; fontSize = '14px'; break;
        case 'lg': padding = '14px 32px'; fontSize = '16px'; break;
        case 'xl': padding = '18px 40px'; fontSize = '18px'; break;
        case 'block': 
            padding = '18px 40px'; display = 'block'; width = '100%'; 
            margin = '10px 6px'; fontSize = '20px';
        break;
        default: break;
    }

    let style = {
        display : display,
        width: width,
        backgroundColor : backgroundColor,
        color : color,
        fontWeight: 'bold',
        outline: 'none',
        border: 'none',
        margin: margin,
        padding: padding,
        fontSize: fontSize,
        borderRadius: '6px',
        cursor: 'pointer',
    }

    
    return (
        <button style={style} onClick={() => onClick()}>{text}</button>
    )
}

export default CustomButton
JavaScript
복사

App.js

import './App.css';
import Button from './components/Button';
import CustomButton from './components/CustomButton';

function App() {

  const onClick = () => {
    alert('Clicked!')
  }

  return (
    <div className='container'>
      <h1>inline style</h1>
      <hr/>
      <h2>기본 버튼</h2>
      <Button />
      <hr/>
      <h2>커스텀 버튼</h2>
      <h2>xs</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='xs'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='xs'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='xs'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='xs'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='xs'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='xs'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='xs'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='xs'  onClick={onClick} />
      <h2>sm</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='sm'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='sm'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='sm'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='sm'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='sm'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='sm'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='sm'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='sm'  onClick={onClick} />
      <h2>md</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='md'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='md'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='md'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='md'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='md'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='md'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='md'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='md'  onClick={onClick} />
      <h2>lg</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='lg'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='lg'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='lg'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='lg'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='lg'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='lg'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='lg'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='lg'  onClick={onClick} />
      <h2>xl</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='xl'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='xl'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='xl'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='xl'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='xl'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='xl'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='xl'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='xl'  onClick={onClick} />
      <h2>block</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='block'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='block'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='block'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='block'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='block'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='block'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='block'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='block'  onClick={onClick} />
    </div>
  );
}

export default App;
JavaScript
복사

import CSS

외부에 스타일 시트(CSS) 파일을 생성하고, 이를 불러와서 스타일을 적용하는 방법

문법

import './파일명.css';
JavaScript
복사

<컴포넌트 id="고유한아이디" className="클래스이름" />
JavaScript
복사

예시코드

import CSS 을 적용하여 버튼을 만들어 봅니다.

기본 버튼

Button.jsx

import React from 'react';
import './Button.css';

const Button = ({ id }) => {
  return (
    <button id={id} className='btn'>Button</button>
  )
}

export default Button
JavaScript
복사

Button.css

.btn {
    background-color: royalblue;
    color: white;
    font-weight: bold;
    outline: none;
    border: none;
    margin: 0 2px;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
}

#btn {
    background-color: red;
    color: white;
    font-weight: bold;
    outline: none;
    border: none;
    margin: 0 2px;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
}
CSS
복사

커스텀 버튼

CustomButton.jsx

import React from 'react'
import './CustomButton.css'

const CustomButton = ({ text, btnStyle, btnSize, onClick }) => {
    
    return (
        <button className={`btn ${btnStyle} ${btnSize}`} onClick={() => onClick()}>{text}</button>
    )
}

export default CustomButton
JavaScript
복사

CustomButton.css

.btn {
    display: inline-block;
    width: auto;
    background-color: black;
    color: white;
    font-weight: bold;
    outline: none;
    border: none;
    margin: 0 4px;
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

.btn:hover {
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    filter: brightness(80%) contrast(100%) saturate(100%); 
}


.btn:active {
    box-shadow: none;
}

.btn.xs {
    padding: 2px 8px;
    font-size: 10px;
}

.btn.sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn.md {
    padding: 12px 24px;
    font-size: 14px;
}

.btn.lg {
    padding: 14px 32px;
    font-size: 16px;
}

.btn.xl {
    padding: 18px 40px;
    font-size: 18px;
}

.btn.block {
    padding: 18px 40px;
    display: block;
    width: 100%;
    margin: 10px 6px;
    font-size: 20px;
}

/* Color variations */
.btn.primary { background-color: #007BFF; }
.btn.secondary { background-color: #6C757D; }
.btn.success { background-color: #28A745; }
.btn.danger { background-color: #DC3545; }
.btn.warning { background-color: #FFC107; color: black; }
.btn.info { background-color: #17A2B8; }
.btn.light { background-color: #F8F9FA; color: black; }
.btn.dark { background-color: #343A40; }
CSS
복사

App.js

import './App.css';
import Button from './components/Button/Button';
import CustomButton from './components/CustomButton/CustomButton';

function App() {

  const onClick = () => {
    alert('Clicked!')
  }

  return (
    <div className='container'>
      <h1>import css</h1>
      <hr/>
      <h2>기본 버튼</h2>
      <Button />
      <Button id='btn' />
      <hr/>
      <h2>커스텀 버튼</h2>
      <h2>xs</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='xs'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='xs'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='xs'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='xs'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='xs'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='xs'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='xs'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='xs'  onClick={onClick} />
      <h2>sm</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='sm'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='sm'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='sm'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='sm'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='sm'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='sm'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='sm'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='sm'  onClick={onClick} />
      <h2>md</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='md'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='md'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='md'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='md'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='md'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='md'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='md'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='md'  onClick={onClick} />
      <h2>lg</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='lg'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='lg'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='lg'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='lg'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='lg'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='lg'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='lg'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='lg'  onClick={onClick} />
      <h2>xl</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='xl'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='xl'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='xl'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='xl'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='xl'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='xl'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='xl'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='xl'  onClick={onClick} />
      <h2>block</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='block'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='block'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='block'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='block'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='block'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='block'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='block'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='block'  onClick={onClick} />
    </div>
  );
}

export default App;
JavaScript
복사

주의사항

서로 다른 컴포넌트에서 개별적으로 다른 CSS 를 import 하더라도, 스타일이 전역에 적용됩니다.

개별적인 컴포넌트에서, 각각의 CSS import 하더라고 실제로는 하나의 html 에 각각의 <style> 에 랜더링 됩니다.

따라서, 컴포넌트별로 import 한 CSS 파일이 결과적으로는 하나로 합쳐저서 적용되는 것을 볼 수 있습니다.

Button.jsx 컴포넌트에서 같은 경로의 Button.css 를 포함하고 있습니다.

CustomButton.jsx 컴포넌트에서 같은 경로의 CustomButton.css 를 포함하고 있습니다.

실제로, 각 컴포넌트에서 import 한 CSS 는 index.html 파일에 <style> 태그로 여러 개가 랜더링 됩니다.

•

 <style> :     index.css

•

 <style> :     App.css

•

 <style> :     Button.css

•

 <style> :     CustomButton.css

이렇게 개별로 import 한 css 파일일 하나의 html 로 전역에서 설정되다보니, 다른 css 파일에서 지정한 선택자가 같으면, 스타일링 중복되는 현상이 발생합니다.

여기서는, Button.css 에서도 .btn 선택자를 지정하고, CustomButton.css 에서는 .btn 선택자를 지정하고 있습니다. 이러한 방식으로 지정할 때는, 다른 컴포넌트의 CSS 라면 같은 이름의 선택자은 사용하지 않는 것이 좋습니다.

그런데, 선택자가 중복되더라도, 각 컴포넌트 별로 CSS 를 적용시켜 따로 관리할 수는 없을까요?

이에 대한 해결방법이 바로 CSS Module 입니다.

import CSS Module

CSS를 모듈화하여 컴포넌트 수준에서 스타일을 관리할 수 있도록 도와주는 기술

CSS Module은 클래스 선택자에 대한 지역 범위로의 스타일을 제공합니다.

컴포넌트별 클래스 선택자를 제공하기 위함

클래스 선택자를 중심으로 스코프가 지정됩니다. id나 태그 선택자를 사용하려면 다른 스타일 방법을 사용하거나 전역 스타일로 정의해야 합니다.

고유한 스코프: CSS Modules은 클래스 이름을 지역적으로 스코프화하여 전역 네임스페이스에서의 충돌을 방지합니다. 각 모듈은 자체 고유한 클래스 이름을 생성합니다.

클래스 이름 변환: CSS Modules은 클래스 이름을 자동으로 변환하여 컴포넌트의 클래스 이름과 충돌하지 않도록 합니다. 일반적으로 "camelCase"로 작성된 클래스 이름은 하이픈을 포함하는 "kebab-case"로 변환됩니다.

클래스 이름 사용: JavaScript 코드에서 CSS Modules을 사용할 때는 해당 모듈에서 내보낸 클래스를 불러와서 사용합니다. 이를 통해 스타일을 적용하고 관리할 수 있습니다.

실제로 style 태그에 랜더링 될 때, 각 CSS 모듈에서 지정한 .btn 선택자가 고유한 이름으로 지정되어서 랜더링 됩니다.

문법

{파일명}.module.css 형식으로 파일 생성

import styles from './파일명.module.css';
JavaScript
복사

<컴포넌트 className={styles.클래스속성} />
JavaScript
복사

관례

CSS module 의 클래스 선택자는 카멜 케이스로 쓰는 것이 관례 (케밥 케이스도 가능)

카멜케이스 : .formInput  ➡ { styles.formInput } 
케밥케이스 : .form-input ➡ { styles['form-input']} 
JavaScript
복사

기본 버튼

Button.jsx

import React from 'react';
// import './Button.css';
import styles from './Button.module.css';

const Button = ({ id }) => {
  return (
    <button id={id} className={styles.btn}>Button</button>
  )
}

export default Button
JavaScript
복사

Button.module.css

.btn {
    background-color: royalblue;
    color: white;
    font-weight: bold;
    outline: none;
    border: none;
    margin: 0 2px;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
}

#btn {
    background-color: red;
    color: white;
    font-weight: bold;
    outline: none;
    border: none;
    margin: 0 2px;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
}
CSS
복사

커스텀 버튼

CustomButton.jsx

import React from 'react'
// import './CustomButton.css'
import styles from './CustomButton.module.css';

const CustomButton = ({ text, btnStyle, btnSize, onClick }) => {
    
    return (
        <button className={`${styles.btn} ${styles[btnStyle]} ${styles[btnSize]}`} 
                onClick={() => onClick()}>{text}</button>
    )
}

export default CustomButton
JavaScript
복사

CustomButton.module.css

.btn {
    display: inline-block;
    width: auto;
    background-color: black;
    color: white;
    font-weight: bold;
    outline: none;
    border: none;
    margin: 0 4px;
    padding: 12px 24px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
}

.btn:hover {
    box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
    filter: brightness(80%) contrast(100%) saturate(100%); 
}


.btn:active {
    box-shadow: none;
}

.btn.xs {
    padding: 2px 8px;
    font-size: 10px;
}

.btn.sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn.md {
    padding: 12px 24px;
    font-size: 14px;
}

.btn.lg {
    padding: 14px 32px;
    font-size: 16px;
}

.btn.xl {
    padding: 18px 40px;
    font-size: 18px;
}

.btn.block {
    padding: 18px 40px;
    display: block;
    width: 100%;
    margin: 10px 6px;
    font-size: 20px;
}

/* Color variations */
.btn.primary { background-color: #007BFF; }
.btn.secondary { background-color: #6C757D; }
.btn.success { background-color: #28A745; }
.btn.danger { background-color: #DC3545; }
.btn.warning { background-color: #FFC107; color: black; }
.btn.info { background-color: #17A2B8; }
.btn.light { background-color: #F8F9FA; color: black; }
.btn.dark { background-color: #343A40; }
CSS
복사

App.js

import './App.css';
import Button from './components/Button/Button';
import CustomButton from './components/CustomButton/CustomButton';

function App() {

  const onClick = () => {
    alert('Clicked!')
  }

  return (
    <div className='container'>
      <h1>import css</h1>
      <hr/>
      <h2>기본 버튼</h2>
      <Button />
      <Button id='btn' />
      <hr/>
      <h2>커스텀 버튼</h2>
      <h2>xs</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='xs'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='xs'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='xs'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='xs'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='xs'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='xs'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='xs'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='xs'  onClick={onClick} />
      <h2>sm</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='sm'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='sm'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='sm'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='sm'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='sm'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='sm'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='sm'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='sm'  onClick={onClick} />
      <h2>md</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='md'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='md'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='md'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='md'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='md'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='md'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='md'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='md'  onClick={onClick} />
      <h2>lg</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='lg'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='lg'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='lg'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='lg'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='lg'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='lg'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='lg'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='lg'  onClick={onClick} />
      <h2>xl</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='xl'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='xl'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='xl'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='xl'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='xl'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='xl'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='xl'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='xl'  onClick={onClick} />
      <h2>block</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='block'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='block'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='block'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='block'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='block'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='block'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='block'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='block'  onClick={onClick} />
    </div>
  );
}

export default App;
JavaScript
복사

styled-components

React 에서 스타일이 적용된 컴포넌트를 사용할 수 있게 해주는 라이브러리

설치

npm install styled-components
Shell
복사

문법

import styled from 'styled-components';

const 컴포넌트명 = styled.태그명`
		속성1 : 값1;
		속성2 : 값2;
`;
JavaScript
복사

styled-components 라이브러리를 import 합니다.

styled.태그명 - 사용할 태그 이름을 지정합니다.

`  `  템플릿 리터럴을 사용하여 스타일 속성을 지정합니다.

속성은 케밥 케이스(’style-property’)로  지정합니다.

값은 따옴표(’’) 없이 지정합니다.

예시 코드

styled-components 라이브러리를 사용하여 버튼을 만들어 봅니다.

기본 버튼

Button.jsx

import React from 'react'
import styled from 'styled-components';

// 버튼 스타일
const buttonStyles = `
  font-weight: bold;
  outline: none;
  border: none;
  margin: 0 2px;
  padding: 10px 24px;
  border-radius: 6px;
  cursor: pointer;
`;

// 일반 버튼 스타일
const standard = `
  background-color: royalblue;
  color: white;
`;

// ID가 "btn"인 버튼 스타일
const unique = `
  background-color: red;
  color: white;
`;

// 스타일드 컴포넌트 생성
const StyledButton = styled.button`
  ${buttonStyles}
  ${props => props.id === 'btn' ? unique : standard}
`;

// Button 컴포넌트
const Button = ({ id }) => {
  return <StyledButton id={id}>Button</StyledButton>;
}

export default Button;
JavaScript
복사

커스텀 버튼

CustomButton.jsx

import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  display: ${props => props.display || 'inline-block'};
  width: ${props => props.width || 'auto'};
  background-color: ${props => props.backgroundColor || 'black'};
  color: ${props => props.color || 'white'};
  font-weight: bold;
  outline: none;
  border: none;
  margin: ${props => props.margin || '0 4px'};
  padding: ${props => props.padding || '12px 24px'};
  font-size: ${props => props.fontSize || '14px'};
  border-radius: 6px;
  cursor: pointer;
`;

const CustomButton = ({ text, btnStyle, btnSize, onClick }) => {
  let backgroundColor = 'black';
  let color = 'white';
  let padding = '12px 24px';
  let display = 'inline-block';
  let fontSize = '14px';
  let width = 'auto';
  let margin = '0 4px';

  switch (btnStyle) {
    case 'primary': backgroundColor = '#007BFF'; break;
    case 'secondary': backgroundColor = '#6C757D'; break;
    case 'success': backgroundColor = '#28A745';break;
    case 'danger': backgroundColor = '#DC3545'; break;
    case 'warning': backgroundColor = '#FFC107'; color = 'black'; break;
    case 'info': backgroundColor = '#17A2B8'; break;
    case 'light': backgroundColor = '#F8F9FA'; color = 'black'; break;
    case 'dark': backgroundColor = '#343A40'; break;
    default: break;
  }

  switch (btnSize) {
    case 'xs': padding = '2px 8px'; fontSize = '10px'; break;
    case 'sm': padding = '6px 12px'; fontSize = '12px'; break;
    case 'md': padding = '12px 24px'; fontSize = '14px'; break;
    case 'lg': padding = '14px 32px'; fontSize = '16px'; break;
    case 'xl': padding = '18px 40px'; fontSize = '18px'; break;
    case 'block': padding = '18px 40px'; display = 'block'; width = '100%'; margin = '10px 6px'; fontSize = '20px'; break;
    default: break;
  }

  return (
    <StyledButton
      backgroundColor={backgroundColor}
      color={color}
      padding={padding}
      display={display}
      fontSize={fontSize}
      width={width}
      margin={margin}
      onClick={onClick}
    >
      {text}
    </StyledButton>
  );
};

export default CustomButton;
JavaScript
복사

App.js

import './App.css';
import Button from './components/Button';
import CustomButton from './components/CustomButton';

function App() {

  const onClick = () => {
    alert('Clicked!')
  }

  return (
    <div className='container'>
      <h1>styled components</h1>
      <hr/>
      <h2>기본 버튼</h2>
      <Button />
      <Button id='btn' />
      <hr/>
      <h2>커스텀 버튼</h2>
      <h2>xs</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='xs'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='xs'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='xs'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='xs'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='xs'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='xs'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='xs'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='xs'  onClick={onClick} />
      <h2>sm</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='sm'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='sm'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='sm'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='sm'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='sm'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='sm'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='sm'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='sm'  onClick={onClick} />
      <h2>md</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='md'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='md'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='md'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='md'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='md'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='md'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='md'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='md'  onClick={onClick} />
      <h2>lg</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='lg'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='lg'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='lg'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='lg'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='lg'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='lg'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='lg'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='lg'  onClick={onClick} />
      <h2>xl</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='xl'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='xl'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='xl'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='xl'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='xl'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='xl'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='xl'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='xl'  onClick={onClick} />
      <h2>block</h2>
      <CustomButton text='primary' btnStyle='primary' btnSize='block'  onClick={onClick} />
      <CustomButton text='secondary' btnStyle='secondary' btnSize='block'  onClick={onClick} />
      <CustomButton text='success' btnStyle='success' btnSize='block'  onClick={onClick} />
      <CustomButton text='danger' btnStyle='danger' btnSize='block'  onClick={onClick} />
      <CustomButton text='warning' btnStyle='warning' btnSize='block'  onClick={onClick} />
      <CustomButton text='info' btnStyle='info' btnSize='block'  onClick={onClick} />
      <CustomButton text='light' btnStyle='light' btnSize='block'  onClick={onClick} />
      <CustomButton text='dark' btnStyle='dark' btnSize='block'  onClick={onClick} />
    </div>
  );
}

export default App;
JavaScript
복사

BootStrap

반응형 웹 디자인 및 개발을 위한 HTML, CSS 및 JavaScript 프레임워크

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

https://getbootstrap.com/

문법

<컴포넌트 className="미리정의된 클래스속성" />
JavaScript
복사

예시

<button className="btn btn-primary">Button</button>
JavaScript
복사

예시 코드

bootstrap 을 사용하여 버튼을 만들어 봅니다.

기본 버튼

Button.jsx

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // ✅ Bootstrap CSS를 추가

const Button = () => {
  return (
    <button className="btn btn-primary">Button</button>
  );
}

export default Button;
JavaScript
복사

커스텀 버튼

CustomButton.jsx

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'; // ✅ Bootstrap CSS를 추가

const CustomButton = ({ text, btnStyle, btnSize, onClick }) => {
    let buttonClasses = 'btn';

    switch (btnStyle) {
        case 'primary': buttonClasses += ' btn-primary';  break;
        case 'secondary': buttonClasses += ' btn-secondary';  break;
        case 'success': buttonClasses += ' btn-success';  break;
        case 'danger': buttonClasses += ' btn-danger';  break;
        case 'warning': buttonClasses += ' btn-warning';  break;
        case 'info': buttonClasses += ' btn-info';  break;
        case 'light': buttonClasses += ' btn-light';  break;
        case 'dark': buttonClasses += ' btn-dark';  break;
        default: break;
    }

    switch (btnSize) {
        case 'xs': buttonClasses += ' btn-xs'; break;
        case 'sm': buttonClasses += ' btn-sm'; break;
        case 'md': buttonClasses += ' btn-md'; break;
        case 'lg': buttonClasses += ' btn-lg'; break;
        case 'xl': buttonClasses += ' '; break;                 // bootstrap5 버전 btn-xl ❌ deprecated
        case 'block': buttonClasses += ' '; break;              // bootstrap5 버전 btn-block ❌ deprecated
        default: break;
    }

    return (
        <button className={buttonClasses} onClick={() => onClick()}>{text}</button>
    );
}

export default CustomButton;
JavaScript
복사

App.js

import './App.css';
import Button from './components/Button';
import CustomButton from './components/CustomButton';

function App() {

  const onClick = () => {
    alert('Clicked!')
  }

  return (
    <div className='container'>
      <h1>bootstrap</h1>
      <hr/>
      <h2>기본 버튼</h2>
      <Button />
      <hr/>
      <h2>커스텀 버튼</h2>
      <h2>xs</h2>
      <div className='d-flex justify-content-between align-items-center'>
        <CustomButton text='primary' btnStyle='primary' btnSize='xs'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='xs'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='xs'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='xs'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='xs'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='xs'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='xs'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='xs'  onClick={onClick} />
      </div>
      <h2>sm</h2>
      <div className='d-flex justify-content-between align-items-center'>
        <CustomButton text='primary' btnStyle='primary' btnSize='sm'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='sm'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='sm'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='sm'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='sm'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='sm'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='sm'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='sm'  onClick={onClick} />
      </div>
      <h2>md</h2>
      <div className='d-flex justify-content-between align-items-center'>
        <CustomButton text='primary' btnStyle='primary' btnSize='md'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='md'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='md'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='md'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='md'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='md'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='md'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='md'  onClick={onClick} />
      </div>
      <h2>lg</h2>
      <div className='d-flex justify-content-between align-items-center'>
        <CustomButton text='primary' btnStyle='primary' btnSize='lg'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='lg'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='lg'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='lg'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='lg'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='lg'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='lg'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='lg'  onClick={onClick} />
      </div>
      <h2>xl</h2>
      <div class="d-grid gap-2 col-6 mx-auto">
        <CustomButton text='primary' btnStyle='primary' btnSize='xl'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='xl'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='xl'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='xl'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='xl'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='xl'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='xl'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='xl'  onClick={onClick} />
      </div>
      <h2>block</h2>
      <div class="d-grid gap-2">
        <CustomButton text='primary' btnStyle='primary' btnSize='block'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='block'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='block'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='block'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='block'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='block'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='block'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='block'  onClick={onClick} />
      </div>
    </div>
  );
}

export default App;
JavaScript
복사

React-BootStrap

Bootstrap을 React 애플리케이션에서 사용할 수 있도록 React 컴포넌트로 감싼 라이브러리

React와 Bootstrap을 조합하여 효과적으로 사용할 수 있도록 해주며, React의 컴포넌트 기반 아키텍처를 활용하여 Bootstrap을 더욱 유연하게 사용할 수 있게 합니다.

React Bootstrap | React Bootstrap

https://react-bootstrap.netlify.app/

설치

npm install react-bootstrap bootstrap
Shell
복사

문법

// 방법 1️⃣
import 컴포넌트 from 'react-bootstrap/컴포넌트';

// 방법 2️⃣
import { 컴포넌트} from 'react-bootstrap';

<컴포넌트 옵션="값" 옵션2="값"  />
JavaScript
복사

예시

import Button from 'react-bootstrap/Button';

<Button variant='primary' onClick={onClick}>Button</Button>
JavaScript
복사

예시 코드

react-bootstrap 을 사용하여 버튼을 만들어 봅니다.

기본 버튼

ReactButton.jsx

import React from 'react';
import Button from 'react-bootstrap/Button';

const ReactButton = () => {
  return (
    <Button variant='primary'>Button</Button>
  );
}

export default ReactButton;
JavaScript
복사

커스텀 버튼

CustomButton.jsx

import 'bootstrap/dist/css/bootstrap.min.css';
import Button from 'react-bootstrap/Button'; 

const CustomButton = ({ text, btnStyle, btnSize, onClick }) => {
    let variant = 'primary';

    switch (btnStyle) {
        case 'secondary': variant = 'secondary';  break;
        case 'success': variant = 'success';  break;
        case 'danger': variant = 'danger';  break;
        case 'warning': variant = 'warning';  break;
        case 'info': variant = 'info';  break;
        case 'light': variant = 'light';  break;
        case 'dark': variant = 'dark';  break;
        default: break;
    }

    let size = '';

    switch (btnSize) {
        case 'xs': size = 'sm'; break;
        case 'sm': size = 'sm'; break;
        case 'md': size = ''; break;
        case 'lg': size = 'lg'; break;
        default: break;
    }

    return (
        <Button variant={variant} size={size} onClick={() => onClick()}>{text}</Button>
    );
}

export default CustomButton;
JavaScript
복사

App.js

import './App.css';
import CustomButton from './components/CustomButton';
import ReactButton from './components/ReactButton';

function App() {

  const onClick = () => {
    alert('Clicked!')
  }

  return (
    <div className='container'>
      <h1>react-bootstrap</h1>
      <hr/>
      <h2>기본 버튼</h2>
      <ReactButton />
      <hr/>
      <h2>커스텀 버튼</h2>
      <h2>xs</h2>
      <div className='d-flex justify-content-between align-items-center'>
        <CustomButton text='primary' btnStyle='primary' btnSize='xs'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='xs'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='xs'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='xs'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='xs'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='xs'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='xs'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='xs'  onClick={onClick} />
      </div>
      <h2>sm</h2>
      <div className='d-flex justify-content-between align-items-center'>
        <CustomButton text='primary' btnStyle='primary' btnSize='sm'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='sm'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='sm'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='sm'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='sm'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='sm'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='sm'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='sm'  onClick={onClick} />
      </div>
      <h2>md</h2>
      <div className='d-flex justify-content-between align-items-center'>
        <CustomButton text='primary' btnStyle='primary' btnSize='md'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='md'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='md'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='md'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='md'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='md'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='md'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='md'  onClick={onClick} />
      </div>
      <h2>lg</h2>
      <div className='d-flex justify-content-between align-items-center'>
        <CustomButton text='primary' btnStyle='primary' btnSize='lg'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='lg'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='lg'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='lg'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='lg'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='lg'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='lg'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='lg'  onClick={onClick} />
      </div>
      <h2>xl</h2>
      <div class="d-grid gap-2 col-6 mx-auto">
        <CustomButton text='primary' btnStyle='primary' btnSize='xl'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='xl'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='xl'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='xl'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='xl'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='xl'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='xl'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='xl'  onClick={onClick} />
      </div>
      <h2>block</h2>
      <div class="d-grid gap-2">
        <CustomButton text='primary' btnStyle='primary' btnSize='block'  onClick={onClick} />
        <CustomButton text='secondary' btnStyle='secondary' btnSize='block'  onClick={onClick} />
        <CustomButton text='success' btnStyle='success' btnSize='block'  onClick={onClick} />
        <CustomButton text='danger' btnStyle='danger' btnSize='block'  onClick={onClick} />
        <CustomButton text='warning' btnStyle='warning' btnSize='block'  onClick={onClick} />
        <CustomButton text='info' btnStyle='info' btnSize='block'  onClick={onClick} />
        <CustomButton text='light' btnStyle='light' btnSize='block'  onClick={onClick} />
        <CustomButton text='dark' btnStyle='dark' btnSize='block'  onClick={onClick} />
      </div>
    </div>
  );
}

export default App;
JavaScript
복사