2022.06.27 TIL

리액트

export / import

let a = 10;

export default a;

data.js 파일에 있는 변수를 하나 export 한다.

import 작명 from "./data.js"

그러면 a라는 변수 하나를 갖고와서 쓸 수 있음.

let a = 10;
let b = 100;
let c = 1000;

export {a,b,c};

여러 개의 변수를 공유하고 싶을 땐
{} 이용해서 이런 식으로.

import {a,b,c} from "./data.js"

({}로 여러 개 받을 때는 변수 이름이 같아야 함!)

헷갈렸던 점:
js파일 한번 import하면 작명.a 작명.b 이런 식으로 객체처럼 쓸 수 있을 줄 알았는데 그거랑은 방식이 다름.

---

리액트에서 여러 페이지 만들기

asdf.com/about
asdf.com/details
이렇게 페이지 나눌 때
"리액트 라우터" 라이브러리를 사용한다고 함.

• 라이브러리 설치하기:

npm install react-router-dom@6

터미널에 명령어 입력해서 설치 후

index.js 파일로 가서

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
); 

APP/ 이거를 BrowserRouter로 감싸면 댐.
설치 끝.

---

• 리액터 라이브러리 라우터 사용법

		<Link to="/detail">
        		Details
      </Link>
      
      <Routes>
        	<Route path="/" element={<MainPage/>}/>
        	<Route path="/detail" element={<Details/>}/>
        	<Route path="/about" element={<div>어바웃페이지임</div>}/>
  		</Routes>

이런식으로 쓰면 댐
마치 "분기" 같은 것이라고 생각하면 됨.
App 코드 네비게이션 바 아래에 둠.

function App() {

  return (
    <div className="App">

      <TheNavbar/>

      <Routes>
        <Route path="/" element={<MainPage/>}/>
        <Route path="/detail" element={<Details/>}/>
        <Route path="/about" element={<div>어바웃페이지임</div>}/>
      </Routes>
      
    </div>
  );
}

App 부분이 겁나 홀쭉해진 모습. 굿.

라우터 라이브러리 : Navigate 기능

Navigate 사용 예

<Nav.Link onClick={()=>{navigate("/")}} href="#home">Home</Nav.Link>
<Nav.Link onClick={()=>{navigate("/detail")}} href="#features">Details</Nav.Link>

navigate(-1) : 뒤로 가기
navigate(1) : 앞으로 가기
이런식으로 숫자 넣어도 작동

※ 이유는 모르겠지만 함수 안에서 미리 선언 해놔야 쓸 수 있음.

let navigate = useNavigate();

라우터 라이브러리 : 없는 페이지 표시 하기

<Route path="*" element={<div>없는 페이지요</div>}/>

path를 * 로 해두면 나머지 경로 다 처리해줌.

000.000.000/about/member 만들기

<Route path="/about" element={<About/>}>
          <Route path="member" element={<div>멤버임</div>}/>
          <Route path="location" element={<div>위치임</div>}/>
</Route>

이렇게 하면 /about/member 이렇게 들어갔을 때

1. /about에 있던 페이지 뜨고
2. 원하는 위치에 자식 페이지 뜨게 할 수 있음.

원하는 위치에 뜨게 하기:

function About(){
    return (
        <div>
            <h4>회사 정보임</h4>
            <Outlet/>
        </div>
    )
}

상위 컴포넌트에다가 <Outlet/> 이거 추가하면 됨.

<About/> 안에서
하위 부분인 <div>멤버임</div> 이 저 위치에 뜨게 되는거.

라우터 라이브러리 : detail/0 detail/1 detail2 . . . 구현

 <Route path="/detail/:id" element={<Details shoesData={shoesData}/>}/>

path 경로 부분에다가
/:id
이런 식으로 해주면 됨

※ /:asdf 이런 식으로 해도 됨. 이름은 알빠 ㄴ

function Details(props){
  
  let id = useParams().id;
		...

그 다음 /detail/:id 부분 쓰고싶을 때
이렇게 쓰면 완료.
useParams()는 객체를 반환하기 때문에 useParams().작명했던거
이렇게 해서 받아야 함.