react-bootstrap 의문점

<blockquote>import React, { useState, useEffect } from 'react';
import './App.css'
import PropTypes from 'prop-types';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.css'

import { Link, Route, Switch } from 'react-router-dom';
import Cart from './Cart';

function App() {

let [alert, alert변경] = useState(false);
let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']);
let [좋아요, 좋아요변경] = useState([0, 0, 0]);
let [modal, modal변경] = useState(false);

const 좋아요버튼클릭 = (i) => {
let 따봉copy = [...좋아요];
따봉copy[i]++;
좋아요변경(따봉copy);
}

const [todoText, setTodoText] = useState('');

useEffect(() => { console.log(todoText); }, [todoText]);

const onChange = (e) => { setTodoText(e.target.value); };

let [inputData, inputData변경] = useState('');
let [article, article변경] = useState(0);
let [태그저장소, 태그변경] = useState("");

useEffect(() => {
let 타이머 = setTimeout(() => {

alert변경(true);

}, 100);
return () => { clearTimeout(타이머) }

}, [inputData]);

const title = document.title;
function 제목바꾸기() {

var newArray = [...글제목];
newArray.sort();
글제목변경(newArray);
}

function 글추가() {
var eventArray = [...글제목];
eventArray.push(태그저장소);

var newheart = [...좋아요];

newheart.push(0);
좋아요변경(newheart);
글제목변경(eventArray);

}

function modal띄우기() {
if (modal === false) {
modal변경(true);
} else if (modal === true) {
modal변경(false);
}
}

return (
<div className="App">

<div> <input type="text" placeholder="할 일을 입력하세요." onChange={onChange} /> </div>

{
alert === true
? (
<div className='my-alert'>영어로 쓰세요 </div>
)
: null
}

{inputData}

<input onChange={(e) => { inputData변경(e.target.value) }} />

<div className="black-nav">
<div>개발 blog</div>
</div>

<button onClick={제목바꾸기} className="rebutton"> ㄱㄴㄷ 수정버튼 </button>
<button onClick> 검색용 </button>

<div>{태그저장소}</div>
<div id="result"></div>

<button onClick={modal띄우기}>광고버튼</button>

{
modal === true
? <Modal 글제목={글제목} article={article}></Modal>
: null
}

{

글제목.map(function (a, index) {
return (
<div className="list" key={index}>
<h3 onClick={() => { article변경(index) }}> {a} <span onClick={function () { 좋아요버튼클릭(index) }}>💖</span> {좋아요[index]} </h3>
<p>2월 17일 발행</p>
<hr />
</div>
)
})

}

<div className='publish'>

{/* <input onChange={e => 태그변경(e.target.value)}></input> */}
<button onClick={글추가}> 저장</button>
</div>

<button className="btn btn-primary" onClick={() => {

axios.get('https://codingapple1.github.io/shop/data2.json')
.then((result) => { console.log(result.data) })
.catch(() => { })

}}>더보기</button>

<Route exact path="/">
<div>메인페이지에요</div>
</Route>

<Route path="/detail">
<div>상세페이지인데요</div>
</Route>

<Route path="/cart">
<Cart></Cart>

</Route>
</div>

);
}

function Modal(props) {
return (
<div className="modal">
<h2>{props.글제목[props.article]}</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}

export default App;</blockquote>
안녕하세요 수고많으십니다 ㅎㅎ

import 'bootstrap/dist/css/bootstrap.css' 이 코드 한줄의 유무로 모달창이 되기도하고 안되기도 하는데요, 이유가 뭘까요??

그리고 왜 변경처리하지않은 요소까지 폰트와 버튼모양 등이 바뀔까요?