✔️ React에 이미지 넣는 방법
1. html 안에서 src 폴더의 이미지 사용
import 변수명 from '파일경로'를 사용하여 import 시킨다.- url을 사용할땐
'url(' + 변수명 + ')'을 사용한다.
import bg from './bg.png'
function App(){
return (
<div>
<div className="main-bg" style={{ backgroundImage : 'url(' + bg + ')' }}></div>
<img src={bg}/>
</div>
)
}2. public 폴더의 이미지 사용
리액트로 개발을 끝내면 build(모든 코드를 한 파일로 압축해주는 작업)을 합니다.
src 폴더에 있던 코드와 파일은 다 압축이 되는데 public 폴더에 있는 것들은 그대로 보존해줍니다.
그래서 형태를 보존하고 싶은 파일은 public 폴더에 넣습니다.
이미지, txt, json 등 수정이 필요없는 static 파일들의 경우엔 public 폴더에 보관해도 상관없습니다.
function App(){
return (
<div>
<img src={process.env.PUBLIC_URL + '/logo192.png'} /> // 권장되는 방식
<img src="/logo192.png" />
</div>
)
}process.env.PUBLIC_URL + '경로명'이 권장되는 이유
리액트로 만든 html 페이지를 배포하게될 때 mj9457.github.io로 배포하면 문제 없지만, 추가되는 경로mj9457.github.io/shop에 배포를 할때 파일이 오류를 초래할 수 있습니다.
✔️ React에 폴더 구조
1. components 폴더로 묶기: 컴포넌트 역할 js 파일
2. pages/routes 폴더로 묶기: 페이지 역할 js 파일
3. utils 폴더로 묶기: 자주 사용하는 함수
...프로젝트를 폴더로 구조화하기
✔️ React Router
리액트는 페이지를 나눌 때 router를 사용한다. html 파일 하나만 사용하기 때문에 외부 라이브러리를 설치해서 구현한다.
1. 설치하는 방법
vsc 터미널에서 npm install react-router-dom@6 입력
index.js에서 <APP />을 <BrowserRouter>로 감싸고 import 하기
2. 라우터로 페이지 나누는 방법
App.js상단에 Routes, Route, Link를 import해준다.Routes 를 전체 페이지로 보면되고,Route를 내부 페이지로 보면 된다.
Route에path는 /url 경로,element는 <보여줄 요소>로 구성된다.
path에서 메인 페이지는"/"를 사용한다.
(App.js)
import { Routes, Route, Link } from 'react-router-dom'
function App(){
return (
<Routes>
<Route path="/" element={ <div>메인페이지</div> } />
<Route path="/detail" element={ <div>상세페이지</div> } />
</Routes>
)
}3. 페이지 이동 버튼
<Link>태그를 사용해서 페이지를 이동한다. html의 a태그와 유사
<Link to="/">메인페이지</Link>
<Link to="/detail">상세페이지</Link>useNavigate()를 사용해서 페이지를 이동한다.
let navigate = useNavigate();
<Nav onClick={() => { navigate('/경로명') }}></Nav>
<Nav onClick={() => { navigate(1) }}></Nav> // 앞으로 한페이지 이동
<Nav onClick={() => { navigate(-2) }}></Nav> // 뒤로 두페이지 이동4. 404 페이지
사용자가 이상항 경로로 접속했을 때 "없는 페이지"라고 알려주기 위한 페이지
path에 *은 제외하고 모든 경로를 뜻한다
<Routes>
<Route path="/detail" element={<Detail></Detail>}></Route>
<Route path="*" element={ <div>없는 페이지</div> } /> // * 은 제외하고 모든 경로명을 뜻한다
</Routes> 5. Nested Routes, Outlet
Nested Routes란 서브 경로를 만들 수 있는 중첩된 라우트를 뜻한다.
여러 유사한 페이지가 필요할 때 유용하다
장점
1. route의 구조가 간단화
2. element를 여러개 보여줄 수 있다
3. 뒤로가기 버튼 이용 가능
4. 페이지 이동 용이(UI 스위치 조작 간편)
Outlet이란 추가할 element를 어디에 위치하여 보여줄 것인지 뜻한다
<Route path="/about" element={<About></About>}>
<Route path="member" element={<div>멤버 페이지</div>}></Route> // /about/member로 접속하게 되면 <About></About>요소에 <div>멤버 페이지</div>를 추가하여 보여준다
<Route path="location" element={<div>위치 페이지</div>}></Route>
</Route>
function About() {
return (
<div>
<h4>회사 정보</h4>
<Outlet></Outlet>
</div>
);
}6. url 파라미터 문법
페이지를 여러개 만들때 사용한다.
path에 경로에 /:추가할 값을 사용하면 아무 문자를 뜻하며 url파라미터로 사용한다.
useParams: 유저가 입력한 값을 추출한다.
조건식을 사용해서 어떤 경로에서 페이지를 보여줄 것인지 정해야한다
위에서 path경로에 설정한 url 파라미터를 문자 or 숫자가 입력받게 조건식을 설정한다.
-- App.js --
import Detail from './Detail';
<App>
<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>
</App>-- Detail.js --
import { useParams } from 'react-router-dom';
function Detail(props) {
let { id } = useParams();
return (
<div className="container">
<h4 className="pt-5">{props.shoes[id].title}</h4>
<p>{props.shoes[id].content}</p>
<p>{props.shoes[id].price}원</p>
</div>
);
}
export default Detail;
