React

React Part 1 - Step 3

hminor 2023. 6. 25. 17:52

React - Router

리엑트에서 페이지 나누는 법

  1. 컴포넌트를 만들어서 상세페이지 내용 채우기
  2. 누가 /detail에 접속하면 해당 커포넌트를 보여줌

설치 순서

  1. terminal → npm i react-router-dom@6
  2. index.js → BrowserRouter 를 작성하기
    1. import 또한 함께 해주고 BrowserRouter 태그로 App을 감싸주기
<Routes>
  <Route path='/' element={<div>메인페이지임</div>} />
</Routes>

그리고 팁으로 react에서는 태그로 감싼뒤 요소들을 넣어야 하기 때문에

이때 div태그를 적기 그렇다면 그냥 <> </>만 넣어줘도 된다.

무튼 해당 element 속성 안에 원하는 데이터를 <></> 태그 혹은 다른 태그로 감싼 상태로

넣어주게 되면

<Routes>
  <Route path='/' element={<>
  <div className='main-bg'>
  {/* 배경사진 */}
  </div></>} />

  <Route path='/detail' element={<>
    <div className='contain'>
      <div></div>
      {item.map((item) => {
        return item})}
      <div></div>
    </div></>}/>
</Routes>

 

페이지 이동 버튼

Link 태그 사용하기

  • to 속성을 이용해서 기존에 작성했던 path 경로로 이동할 수 있도록 해준다.

 

숙제

  • 상세페이지 컴포넌트로 만들어오기
    • 너무 길면 다른 파일로 빼서 가져오도록 해보기

우선 나는 내가 원하는 사이트를 만들기 위해

한번 작성만 해보고 사용하지 않을거라서

다른 파일에서 작성후 export 해서 App.js 에서 import 하여 사용하는 형식으로 했다.

  1. 새로운 파일에서 데이터를 작성후 export 하기
    1. js 파일이기 때문에 파이썬에서 처럼 그냥 변수를 선언하는 것이 아닌 let, const, var 로 지정해줘야 한다는것.
    2. export 할때
      1. 하나면 default 해주고
      2. 여러개면 default 없이 {} 중괄호 안에 작성해주기
let comp = [
  <div className="container">
  <div className="row">
    <div className="col-md-6">
      <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
    </div>
    <div className="col-md-6">
      <h4 className="pt-5">상품명</h4>
      <p>상품설명</p>
      <p>120000원</p>
      <button className="btn btn-danger">주문하기</button> 
    </div>
  </div>
</div> 
]

export default comp

 

2.App.js에서 사용하기

  1. 사용할때는 import 해줘야하는데
    1. 데이터가 하나의 경우엔 변수값을 아무거나 줘도 괜찮지만
    2. 여러개의 경우엔 지정했던대로 해줘야 한다는것.
  2. <Routes></Routes> 태그 안에 <Route /> 를 작성한다는 것
  3. <Route /> 속성으로는 path, element 가 있다는 것
  4. 해당 경로로 가기 위해 사용하는 <Link></Link> 태그에는
    1. Route에서 지정했던 path로 가기 위한 to 속성이 있다.
import comp from './newcomponent'

<Link to={'/comp'}>새로운 컴포넌트</Link>

<Route path='/comp' element={<>
  {comp}
</>}/>

 

여기서 내가 잘못 생각햇던 부분

컴포넌트를 만든다고 하는 것은 함수 형식으로 만드는 것이라는 것.

내가 한 것은 그냥 데이터를 전달한것이라는 거…

그래서 원래 컴포넌트를 만드는 것을 하려면

function Comp() {
  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img src="https://codingapple1.github.io/shop/shoes1.jpg" width="100%" />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">상품명</h4>
          <p>상품설명</p>
          <p>120000원</p>
          <button className="btn btn-danger">주문하기</button> 
        </div>
      </div>
    </div> 
  )
}

export default Comp

사용할때는

// App.js

import Comp from './newcomponent'

import comp from './newcomponent'

<Link to={'/comp'}>새로운 컴포넌트</Link>

<Route path='/comp' element={<>
  { <comp />}
</>}/>

 

 

navigate, nested routes, outlet


페이지 이동을 도와주는 useNavigate()

let navigate = useNavigate()
  1. useNavigate()를 사용하는 이유
    1. 기존의 Link태그의 경우 a태그처럼 생겼기때문에 내가 클릭한 것을 통해 원하는 경로로 이동하고자 할 경우 사용한다고 한다. (그냥 Link는 a태그 같아서??)
    2. 그리고 만약 다른 파일에서 export 해서 사용할 경우 적용이 안되는 것 같은데 (더 찾아봐야할 듯) ex) data.js에서 작성한 nav에서 navigate를 사용할 경우 해당 페이지에선 path가 적힌곳이 없기에 에러가 뜬다.
    3. 그래서 기존 data.js에서 작성한 데이터를 App.js로 다시 옮겨왔음
 <Navbar id='navbar' variant="dark">
        <div className="grid subfont">
          <div className=''></div>
          <Nav style={{color:'black',justifyContent: 'center',alignItems: 'center' }} href="#home"><span class="material-symbols-outlined" style={{marginRight:'3px'}}>menu</span>메뉴</Nav>
          <div></div>
          <Nav style={{color:'black',justifyContent: 'center',alignItems: 'center' }}  href="#features"><span class="material-symbols-outlined">search</span>검색</Nav>
          <div></div>
          <Nav className='mainfont' style={{color:'black',justifyContent: 'center',alignItems: 'center', fontSize:'2rem', letterSpacing:'5px', cursor: 'pointer' }} onClick={()=> {navigate('/')}}>LOUIS VUITTON</Nav>
          <div></div>
          <Nav style={{color:'black',justifyContent: 'center',alignItems: 'center', cursor: 'pointer' }}  onClick={()=> {navigate('/detail')}} >위시리스트</Nav>
          <div></div>
          <Nav style={{color:'black',justifyContent: 'center',alignItems: 'center' }}  href="#pricing">My lv</Nav>
          <div></div>
          <Nav style={{color:'black',justifyContent: 'center',alignItems: 'center' }}  href="#pricing"><span class="material-symbols-outlined">shopping_cart_checkout</span></Nav>
        </div>
      </Navbar>

 

// 간단하게 정리하자면
import {useNavigate} from 'react-router-dom';

let navigate = useNavigate()

function App() {
	return(
		<div onClick={()=>{navigate('/')}}>Home</div>

		<Routes>
			<Route path='/' element="<><div>여긴 홈</div></>"/>
		</Routes>
	)
}

 

그리고 다음 페이지, 이전 페이지

navigate( 1 ) 은 한 페이지 앞으로 가기가 되고

navigate( -1 ) 은 한 페이지 전으로 가게 된다.

물론 (2) 를 넣으면 두 페이지 앞과 전으로 이동하게 된다.

404페이지

Vue에서와 마찬가지로 path를 ‘ * ’ 아스타리스크 즉 별표로 해놓으면 된다.

다만 Vue와는 다르게 가장 하단에 적지 않아도 잘 작동 하는듯..? 내가 몰라서 그런가?

따로 강사님이 언급은 안함

<Route path='*' element={<>여긴 뭐하러 왔어?</>}/>

 

Nested Routes

우선 About 컴포넌트가 있는 페이지로 이동하고자 할 경우를 설정

<Nav style={{color:'black',justifyContent: 'center',alignItems: 'center', cursor: 'pointer' }}  onClick={()=>{navigate('/about')}}>My lv</Nav>

<Route path='/about' element={<><About /></>}/>


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

그런데 여기서 경로를 ‘ /about ‘ 말고 ‘ /about/member ‘ 혹은 ‘ /about /location‘ 으로 가는 페이지를 만들고자 할 경우

물론 아래와 같이 작성해도 되긴하다.

<Route path='/about' element={<><About /></>}/>
<Route path='/about/member' element={<><About /></>}/>
<Route path='/about/location' element={<><About /></>}/>

 

더 유용하게 사용되는 것으로는 Nested Routes 가 있다.

이때는 <Route / > 이렇게 사용하지 않고 <Route> </Route> 이렇게 닫는 태그를 사용하며 안에 품는 경로만 작성해주기.

<Route path='/about' element={<><About /></>}> 
	<Route path='member' element={<> <div>안녕</div> </>}/>
	<Route path='location' element={<><About /></>}/>
</Route>

장점1. Route 작성이 비교적 간단해지게 된다.

장점2. nested route 접속시엔 element가 2개나 보이게 된다.

그런데 두개다 보여지지 않게 되고 하나만 보이게 되는데

이럴때 사용하는 것이

<Outlet></Outlet> 인데 이것은 구멍을 뚫어 놓음으로써

nested route가 들어올 구멍을 미리 만들어 주는 것이다.

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

정리

Nested Routes 는 언제 사용하는가??

  • 여러 유사한 페이지가 필요할 때

Route의 장점

  • 페이지의 앞 뒤로 가기 버튼 이용가능
  • 페이지 이동이 쉬움
저작자표시

'React' 카테고리의 다른 글

React - 실시간 동작을 처리하기 위해 사용되는 라이브러리 및 도구  (0) 2024.07.06
React - 프로젝트 셋팅 (PWA, Tailwind, Router, Axios, Redux-Toolkit)  (0) 2024.02.20
React Part 1 - Step 4  (0) 2023.06.25
React Part 1 - Step 2  (0) 2023.06.25
React Part 1 - Step 1  (0) 2023.06.25

'React'의 다른글

  • 현재글React Part 1 - Step 3

관련글

티스토리툴바