component 내부에 .map()을 실행할 경우 key값 주기
array.map((item, index)=> (
<li key={index}>{item}</>
))};map 두번째 인자로 index를 실행시켜서 array 순서번호를 주면 끗!
react-router-dom
npm i react-router-dom 설치 후 import 하기
react-router-dom = web에서 사용할 때
react-router-native = app에서 사용할 때
react-router = web, app 둘 다 사용가능
Router
Router에는 BrowserRouter, HashRouter가 있다.
BrowserRouter = /login 이런형식
HashRouter = /*/login 이런형식.
HashRouter는 github pages에서 설정하기 간편하지만 검색 엔진으로 읽지 못함. 개인적인 포폴용으로 적합
BrowserRouter는 새로고침을 하면 경로를 찾지 못해서 에러가 남. 그렇기에 서버에 추가적인 세팅이 필요하며, 세팅 시 검색엔진 신경도 써야되고 github pages에서 설정하기 복잡함. 일반 프로젝트 작업할 때.
return <HashRouter>
<Route path="/" exact={true} component={Home} />
</HashRouter>path = router 주소
component = 렌더링할 component
exact={true} = url이 path랑 같을 때만 렌더링하게 한다. 이걸 안하면 / , /login 두개의 컴포넌트가 모두 렌더링되는 대참사 일어남.
Link
<a href="">를 사용하게되면 페이지가 refresh되면서 리액트를 쓰는 장점이 없어진다
react-router-dom에서 Link를 임포트한 다음
a태그대신 <Link to="">를 사용하면 겁내 쿨한 로딩없는 페이지를 만들수 있따.
✅ Link는 html로 변환될 때 a 태그로 들어감. css작업할 때 a로 맘껏 꾸미면 된당.
Link로 데이터 공유하는 법은 props를 이용하면 된다.
<Link to={{
pathname: "",
state: { ... , ... , ... }
}}
>이런식으로 state에 props들을 넣어주면 해당 링크를 클릭했을 때 state를 전달받을 수 있다.
⚠ 새로고침 시 state가 undefined가 되면서 props 값을 잃는다. 그 땐 history props를 이용해 홈 화면으로 넘어가도록 만들 수 있음.
if (location.state === undefined) {
history.push("/");
}/:id 변수를 이용해 라우터를 만들 수도 있다.
pathname: `/${id}`, // 이런식으로 url설정하면 됨
<Route path="/:id" component={...} />
// 라우터 안에 라우트는 : 파라미터 사용하면 끄읏