React Style

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

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

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

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;

import './파일명.css';

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

import React from 'react'; import './Button.css'; const Button = ({ id }) => { return ( <button id={id} className='btn'>Button</button> ) } export default Button

.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; }

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

.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; }

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;

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

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

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

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

.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; }

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

.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; }

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;

npm install styled-components

import styled from 'styled-components'; const 컴포넌트명 = styled.태그명` 속성1 : 값1; 속성2 : 값2; `;

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;

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;

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;

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

<button className="btn btn-primary">Button</button>

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;

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;

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;

npm install react-bootstrap bootstrap

// 방법 1️⃣ import 컴포넌트 from 'react-bootstrap/컴포넌트'; // 방법 2️⃣ import { 컴포넌트} from 'react-bootstrap'; <컴포넌트 옵션="값" 옵션2="값" />

import Button from 'react-bootstrap/Button'; <Button variant='primary' onClick={onClick}>Button</Button>

import React from 'react'; import Button from 'react-bootstrap/Button'; const ReactButton = () => { return ( <Button variant='primary'>Button</Button> ); } export default ReactButton;

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;

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;