react bootstrap 검색 후
사이트에 있는 설치 명령어를 터미널에서 입력해준다.
npm install react-bootstrap bootstrap
1) css, import
로 복사해서 App.js
에 붙여넣기
2) css, link
로 복사해서 index.html
에 붙여넣기
사이트에서 UI 복사 붙여넣기로 사용가능 * import
까지 해줘야 잘 작동됨
css 파일에서 src 폴더의 이미지 넣을 땐 ./이미지경로
html에서 src 폴더의 이미지 넣을 땐
import 작명 from '이미지경로'
style = {{ backgroundImage: 'url('+bg+')' }}
html에서 public 폴저 이미지 사용할 땐 그냥 /이미지경로
{process.env.PUBLIC_URL+'/이미지경로'}
<< public 폴더 이미지 쓰는 권장 방식import
export
다른 파일에 있던 자료를 가져오려면
import/export
문법을 쓴다.
export default 변수명
import 작명 from '파일경로'
export
하고import
하면 끝 (변수 쓰는 곳에서)(data.js 파일)
let a = 10;
export default a;
(App.js 파일)
import a from './data.js';
console.log(a) // 10
export {변수1, 변수2}
import {변수1, 변수2} from '경로'
함수도
export
가능하다.
/경로
로 접속하면 html 파일 보내줌/경로
로 접속하면 그 컴포넌트 보여줌
npm install react-router-dom@6
(index.js 파일)
import { BrowserRouter } from "react-router-dom";
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
<Link>
useNavigate()
import { useNavigate } from "react-router-dom";
let navigate = useNavigate();
<Nav.Link
onClick={() => {
navigate("/");
}}
>
<Route path="*" element={<div>404 페이지</div>} />
<Outlet></Outlet>
function App() {
return (
<>
<Route path="/about" element={<About />}>
<Route path="member" element={<div>멤버임</div>}></Route>
<Route path="location" element={<div>위치정보임</div>}></Route>
</Route>
</>
)
}
function About() {
return (
<div>
<h4>회사정보임</h4>
<Outlet></Outlet>
</div>
);
}
<Router path="/detail/:id" />
<Router path="/detail/:id/:param2/:param3" />
useParams()
사용.import { useParams } from "react-router-dom";
let { id } = useParams();
배열의 요소를 순차적으로 순회하면서 조건에 일치하는 요소의 값을 즉시 반환한다.
조건을 일치하는 경우가 없다면,undefined
를 반환한다.
find(callback(element, index, array)
- element : 현재 배열의 요소
- index : 현재 배열 요소의 인덱스 (생략 가능)
- array : filter 함수를 호출한 배열 (생략 가능)