1. React 에서 부트스트랩을 사용해보자

부트스트랩의 기본 사용

 

1. 부트스트랩 CDN 설치

https://getbootstrap.com/docs/5.2/getting-started/introduction/

1) Create a new index.html file in your project root. Include the <meta name="viewport"> 
    tag as well for proper responsive behavior in mobile devices.

    인덱스 루트파일을 만들어라, <meta name="viewport">  헤더가 있는 것으로

        * 이미 React 만들때 만들어져있지

2) "index.html" 에 CSS 와 Javascript 를 가져오자

    css :           <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    javascript :    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>


3) 사용한다

2. 원하는 항목을, 복사해 가져와서, 컴포넌트로 뺀 후, 사용한다. ( import 하는 방법도 있지만 이게 좋아보인다.)

 

    로딩스피너 :  https://getbootstrap.com/docs/5.2/components/spinners/ 
    모달 : https://getbootstrap.com/docs/5.2/components/modal/
    등등...
                    ...

 

3. css 수정하기

원본 가져와서 :     <div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>

스타일 변경시키자 : <div className="p-3 mb-2 bg-primary text-white" style={{height :"20rem"}}>.bg-primary</div>

이렇게 라던가... :  <div className="p-3 mb-2 bg-primary text-white" style={{ position:"absolute", top:0, left:0,height :"100%", width:"100%"}}>.bg-primary</div>

 

 

실 사용 예시  

 

1. 모달

    https://getbootstrap.com/docs/5.2/components/modal/#live-demo 

    1)그대로 컴포넌트에 복붙

        <Ui / Modal.js>

            const Modal = () => {   
                return (
                <div>
                    <div>
                    <button type="button" className="btn btn-primary"
                        <button type="button" className="btn btn-secondary"  data-bs-dismiss="modal"> Close </button>
                        <button type="button" className="btn btn-primary">
                            Save changes
                        ...

                );
            };

            export default Modal;


    2) 필요한 스타일만 style 로 강제지정

            <div
                className="modal fade"
                id="exampleModal"
                tabIndex="-1"
                aria-labelledby="exampleModalLabel"
                aria-hidden="true"
                style={{ marginTop: "13rem" }}      // 원하는 스타일로 강제지정
            >
            <div className="modal-dialog">
            <div className="modal-content">



    3) 컴포넌트 붙여서 사용

            import Modal from "./components/modal-bootstrap/modal-with-bootstrap";

            function App() {
                return (
                    <div className="App">
                        <h1> 애니메이션용 </h1>
                        <Modal />               // 붙여서 사용
                    </div>
                );
            }

            export default App;


    ** class 는 className 으로 교체
    ** tabindex 는 tabIndex 로 교체

2. 로딩 스피너

 

    1) 컴포넌트에 복붙

        < UI / LoadingSpinner.js >

            const Spinner = () => {
                return (
                    <div className="spinner-border" role="status">
                        <span className="visually-hidden">Loading...</span>
                    </div>
                );
            };
            export default Spinner;


        * 필요하다면 컴포넌트 내에서, 스타일 지정

    2) 붙여서 사용
                    ...

        <div className={classes.actions}>
            {loading ? ( <Spinner />) : (           // 붙여서 사용
            <button>{isLogin ? "Login" : "Create Account"}</button>
        )}

                ...