React-router-dom 사용법,컴포넌트만들기

페이지 나누는법(리액트 미사용)
1.html 파일 만들어서 상세페이지내용 채움
2.누가/ detail로 접속하면 html 파일보내줌


리액트는 싱글페이지 어플리케이션이라고해서 하나밖에 안보여줌

리액트사용

1.컴포넌트 만들어서 상세페이지내용 채움
2.누가 /detail 접속하면 그 컴포넌트 보여줌

 

이런거
react-roter-dom 라이브러리 쓰면 쉽게 짤 수 있음

 

1.루팅하기

 

1.Routes,Route 만들기

 <Routes>
      <Route path="*" element={<div>없는페이지에요</div>}/>
      <Route path="/" element={<Shoes/>}/>
      <Route path="/detail/:id" element={<Detail shoes={shoes}/>}/>
      //detail 컴포넌트에서 여러개의 페이지를 각각 보여주고 싶다면 파라미터문법을 사용하자

        <Route path="/about" element={<About/>}>
         <Route path="member" element={<div>멤버임</div>}/>
         <Route path="location" element={<About/>}/>
        </Route>
        <Route path="/events" element={<EventPage/>}>
         <Route path="one" element={<p>첫 주문시 양배추즙 서비스</p>}/>
         <Route path="two" element={<p>생일기념 쿠폰받기</p>}/>
        </Route>
      
       
      </Routes>

2.nested route를 이용해 안에 있는 내용보여주기

위에보면

  <Route path="/events" element={<EventPage/>}>
         <Route path="one" element={<p>첫 주문시 양배추즙 서비스</p>}/>
         <Route path="two" element={<p>생일기념 쿠폰받기</p>}/>
        </Route>

이런 녀석들이 있는데 events 페이지를 들어가서 여러 유사한페이지를 만들고 싶을때 쓴다.

사용하기 위해서는 <Outlet>이라는 녀석을 사용하여 구멍을 뚫어주자

//안에있는 거보여주고 싶으면 <Outlet></Outlet>
//nested routs 언제씀? 여러 유사한 페이지필요할때
function About(){
  return (
    <div>
      <h4>회사정보임</h4>
      <Outlet></Outlet>
    </div>
  )
}
function EventPage(){
  return(
    <div>
      <h4>오늘의 이벤트</h4>
      <Outlet></Outlet>
    </div>
  )
}

이런거 왜쓰냐면

 

라우터 작성이 간편해짐 두개를 동시에보여줍니다.

이런식으로 만들면  홈페이지에서 뒤로가기버튼 이용가능

즉 ,페이지이동이 쉬움
하지만 페이지마다 useState 쓰면 일일이수정해야되므로 귀찮습니다.

페이지는 여러개인데 보이는 내용은 똑같을떄
페이지 여러개 만들고 싶으면:URL 파라미터써도됍니다.(이건 아래서 설명하겠습니다.)

3.404페이지 만들기

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

* 경로는 모든 경로를 뜻해서

위에 만들어둔 /detail 이런게 아닌 이상한 페이지 접속시 * 경로로 안내해줍니다. 

 

2.함수만들기

 

변경 전

function Card(props){
  return (
    <div className="col-md-4">
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="80%" />
      <h4>{props.shoes.title}</h4>
      <p>{props.shoes.price}</p>
    </div>
  )
     //shoes 갯수만큼 돌려주세요~
      //파라미터는 두개까지 작명가능
      //i ={i}로 props 받아왔음
  <div className="row">
    {
    shoes.map((a, i) =>{
      return (
        <Card shoes={shoes[i]} i={i}></Card>
      )
    })}
 
  </div>

 

<Card> 쓸때마다 다른 내용보여주고 싶으면 props 잘쓰기
상품다르게 보여주고 싶다면 문자 중간에변수 넣는 문법을사용해서 넣어주기

 

변경 후

function Card(props){
  return (
    <div className="col-md-4">
      <img src={'https://codingapple1.github.io/shop/shoes' + (props.i+1) + '.jpg'}
       width="80%" />
      <h4>{ props.shoes.title }</h4>
      <p>{ props.shoes.price }</p>
    </div>
  )
}