TIL 7주 3일차

리액트

이미지 태그안에 소스 수정

<img

                  src={'https://codingapple1.github.io/shop/shoes'+ (shoes[i].id+1) +'.jpg'}

                  width="80%"

                />

{중괄호}로 감싸고 수정할 부분->'  ' + + ' '

 

---

페이지 나누는 법(리액트 미사용)

1. html 파일 만들어서 상세페이지내용 채움

2. 누가 /detail로 접속하면 html 파일 보내줌

 

페이지 나누는 법(리액트 사용)   -> index.html만 사용함

1. 컴포넌트 만들어서 상세페이지내용 채움

2. 누가 /detail 접속하면 그 컴포넌트 보여줌

 

=> react-router-dom 라이브러리 쓰면 쉽게 만들 수 있다.

 

index.js파일에서

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

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

---

<BrowserRouter>

    <App />

    </BrowserRouter>

 

import App from './App' ; // 내가만든 jsx(js)파일들은 ./부터

import { } from "react-router-dom"; /  " " -> 경로나 ./ 가 없는 것 -> 대부분 설치한 라이브러리

 

import { Routes, Route, Link } from 'react-router-dom';

 

<Route path="/" element={ <div>메인페이지</div>} />

<Route path="/detail" element={ <div>상세페이지임</div> } />

<Route path="/about" element={ <div>어바웃페이지임</div> } />

"/" -> 메인페이지 -> http://localhost:3000/

"/detail" -> 상세페이지 -> http://localhost:3000/detail

 

페이지 이동버튼은 <Link>

<Link className='link-line' to="/">홈</Link>

      <Link className='link-line' to="/detail">상세페이지</Link>

---

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

<Nav.Link onClick={()=>{navigate('/')}}>Home</Nav.Link>

            <Nav.Link onClick={()=>{navigate('/detail')}}>Detail</Nav.Link>

 

navigate(1) : 앞으로 한 페이지 이동

navigate(-1) : 뒤로 한 페이지 이동

--

 

404 페이지 : 홈페이지 주소 잘못 입력했을 

<Route path="*" element={<div>404페이지</div>} />

 

--

Nested Routes --> 여러 유사한 페이지 필요할 

 

장점1. route 작성이 약간 간단해짐

 

 

nested -> 태그 안에 태그...

 

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

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

===

<Route path="/about" element={<About />}>  // about 안에 member, location 넣어줌

<Route path="member" element={<About />} />  --> 어디보여줄지 정하려면 <Outlet>

<Route path="location" element={<About />} />

</Route>

nested routes의 element 보여주는 곳은 <Outlet>

 

Route 장점 : 

1. 이런 식으로 UI 만들면 뒤로가기 버튼 이용가능

2. 페이지 이동이 쉬움(UI 스위치 조작 쉬움)

 

---

페이지 여러개 만들고 싶으면 : URL파라미터 사용

유저가 URL파라미터에 입력한거 가져오려면 useParams()

(참고) URL 파라미터 만들 때 - 여러 개 가

<Route path="/detail/:id" element={

 

---

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

---

let {id} = useParams();