Bootstrap 사용하기
구글에 react bootstrap 검색 -> Get started 선택 -> 터미널 새로 열고 npm install react-bootstrap bootstrap 입력 후 엔터 -> 사이트에서 CSS 코드 import 'bootstrap/dist/css/bootstrap.min.css'; 찾아서 App.js 파일 상단에 입력하거나 index.html 상단에 <link~ />코드 입력하고 저장한다.
(기존 터미널 종료할 땐 ctrl+c 누르면 미리보기가 종료된다.)
이미지 넣는 법 & public 폴더 이용하기
import 작명 from '이미지경로';
<div className="main-bg" style={{ backgroundImage: "url(" + space + ")" }}></div>
- html에서 public 폴더 이미지를 사용할 땐
/이미지경로
<img src="/이미지경로" />public 폴더 이미지를 쓰는 권장방식
<img src={process.env.PUBLIC_URL + '/이미지경로' />
상품 목록 코드 줄이기 전
{/* <div className="col-md-4">
<img
src={process.env.PUBLIC_URL + "umbrella.jpg"}
className="umbrella"
alt="umbrella.jpg"
width="50%"
/>
<h4>{space[4].title}</h4>
<p>{space[4].content}</p>
<p>{space[4].price}</p>
</div> */}코드가 길어지면 import/export 쓰기
- export 하는 방법
export default 변수명;
export 여러개 하는 방법
export {변수1, 변수2}; - import 하는 방법
import 작명 from '파일경로';
import 여러개 하는 방법
import {a, b} from '파일경로';
array/object
let a = ['kim', 20]
let b = { name : 'kim', age : 20 }
b.name; // kim 출력됨.
b.age; // 20 출력됨.중괄호{}를 쓸 때는 왼쪽에다가 자료 이름을 붙여주어야 한다.
시작이 대괄호[ 일 땐 대부분 array 자료다.
시작이 중괄호{ 일 땐 대부분 object 자료다.
페이지 나누는 방법
리액트는 html 파일을 하나밖에 사용하지 않기 때문에 컴포넌트를 만들어서 상세페이지 내용을 채우는 방법으로 페이지를 나눈다.
react-router-dom 라이브러리
터미널에 npm install react-router-dom@6 입력 후 엔터해서 설치한다. 설치 후 npm start 입력해서 미리보기 시작한다.
index.js 파일로 넘어가서 <BrowserRouter></BrowserRouter> 입력하고 import 코드도 적어준다. import { BrowserRouter } from "react-router-dom";
내가 만든 js파일들은 ./부터 시작하고 ./가 없는 import 코드는 대부분 설치한 라이브러리다.
App.js 파일 상단에 import { Routes, Route, Link } from "react-router-dom"; 적는다.
<Routes>
<Route />
</Routes>컴포넌트 안에 위 코드를 적는다. <Route />로 페이지를 나눈다.
페이지 이동 버튼
{/* 페이지 이동 버튼 */}
<Link to="/">HOME</Link>
<Link to="/community">커뮤니티</Link>
<Link to="/shopping">쇼핑</Link>
<Link to="/login">로그인</Link>
<Link to="/join">회원가입</Link>
<Link to="/qna">고객센터</Link>리액트 라우터2
navigate
페이지 이동을 도와주는 함수 - useNavigate()
<Nav.Link
onClick={() => {
navigate("/qna");
}}
>
고객센터
</Nav.Link>
<Nav.Link
onClick={() => {
navigate(-1); // 뒤로 가기랑 똑같은 코드
}}
>
HOME
</Nav.Link>404 페이지
<Route path="*" element={<div>404 페이지</div>} />path="*"은 모든 경로를 의미하는데 정해둔 경로가 아닌 다른 경로로 진입했을 때 * 경로로 안내해준다.
nested routes
서브 경로 만들 수 있는 코드
여러 페이지들이 필요할 경우 사용한다.
<Route path="/search" element={<Search />}>
<Route path="history" element={<div>검색 기록</div>} />
<Route path="settings" element={<div>검색 설정</div>} />
</Route>outlet
nested routes 안의 element들을 어디에 보여줄지 결정하는 코드.
유사한 서브페이지들이 많이 필요할 경우 사용한다.
function Search() {
return (
<div>
<h4>검색 결과</h4>
<Outlet></Outlet>
</div>
);
}리액트 라우터3 - URL 파라미터로 상세페이지 여러개 만들기
<Route path="/detail/0" element={<Detail space={space} />} />
<Route path="/detail/1" element={<Detail space={space} />} />
<Route path="/detail/2" element={<Detail space={space} />} />페이지 여러개 만들고 싶을 땐 :URL파라미터 사용하기.
<Route path="/detail/:id" element={<Detail space={space} />} />
styled-components
터미널에 npm install styled-components 입력
let SkyblueBtn = styled.button`
background: gray;
color: white;
padding: 6px;
margin-top: 3px;
border-radius: 5px;
border-style: none;
`;
<SkyblueBtn>장바구니 담기</SkyblueBtn>
let Box = styled.div`
background: whitesmoke;
padding: 10px;
border-radius: 10px;
`;
<Box></Box>styled-components 장점
- CSS 파일을 안 열어도 된다.
- 스타일이 다른 js 파일을 간섭하지 않는다.
- 페이지 로딩시간이 단축된다.
styled-components 단점
- JS파일이 복잡해진다.
- 중복 스타일은 컴포넌트간 import 해서 쓰는데 CSS파일 쓰는 것과 차이가 없다.
- styled-components를 모른다면 협업이 힘들다.
props로 재활용하기
let SkyblueBtn = styled.button`
background: ${(props) => props.bg};
color: ${(props) => (props.bg == "grey" ? "white" : "black")};
padding: 6px;
margin-top: 3px;
border-radius: 5px;
border-style: none;
`;
<SkyblueBtn bg="gray">장바구니 담기</SkyblueBtn>
일반 CSS 오염 방지 기능 - 모듈화
컴포넌트명.module.css
