KIM

portfolio

04/11-3[정리]

Posted by:

dudghks9303

|

On:

|

정리용

router 쓰는 방법

  1. npm install react-router-dom 입력(설치)
  2. index.js에 import {BrowserRouter} from 'react-router-dom';추가
    <App/>를 <BrowserRouter></BrowserRouter>로 감싸기
  3. App.js에 import {Routes,Route} from 'react-router-dom'; 추가
    div 안에 Routes를 넣거나 또는 div 대신 Routes로 변경
  4. <Route path='주소' element={<컴포넌트이름/>}/>추가

path 부분

  1. /만 있다면 맨 위 부분이다[locahhost:3000/]
  2. *을 입력한다면 path로 지정이 안 된 나머지 부분들 모두를 뜻한다.

element 부분 : 특별한 것은 없다. 양식에 맞추어서 넣어주면 된다.

URL 파라미터[?이름=값&이름=값 형태]

  1. import {Link} from 'react-router-dom';추가
  2. return 안에 <Link to='주소'>내용</Link>로 추가

만약 return 전에 변수로 지정했다면 문자열 처리를 하고 들고 오면 된다. 배열의 경우 개별을 불러내고 싶다면 변수명[인덱스번호]이고 일부나 모두 불러내고 싶다면 map 함수를 사용

useParams : URL 파라미터 값을 가져오는 함수.{이름:값 } 형태로 오기 때문에 .이름 을 붙여서 들고 올 수 있다.

import {useParams} from 'react-router-dom';추가

let 변수명=useParams(); 또는 let {이름}=useParams();로 들고 온다.

전자의 경우 변수명.이름 까지 해야 들고 올 수 있고 후자의 경우 이름만 해도 값이 들고 와 진다.

useLocation : URL 파마리터 의 location 값을 들고온다. 콘솔로 출력 시 hash,key,pathname 같은 특정값들이 나오고 search 부분이 ? 뒤에 붙는 값들이다. 이 함수로 .search를 붙여서 출력 할 시 ?부터 모든 값이 그대로 나오는 단점이 있다.

useSearchParams : 위의 기능과 같은데 .get(“이름”)을 붙이면 해당 이름의 값만 들고온다.

둘의 사용 방법은 다음과 같다.

  1. import {useLocation,useSearchParams} from 'react-router-dom';추가
  2. let 변수명=useLocation();으로 useLocation 사용
  3. return 안에서 사용 시 변수명.이름으로 값을 불러 올 수 있다.
  4. let [변수명,set변수명]=useSearchParams();로 setstate처럼 불러옴
  5. let 다른 변수명=4번의 변수명.get("이름");으로 해당값 불러올 수 있다.

컴포넌트가 아닌 JS의 함수로 이동하기 위한 내용

useNavigate를 쓴다.

import {useNavigate}from 'react-router-dom';추가

let navigate=useNavigate();
let [input,setInput]=useState("");
return(
<div>
<form onSubmit=((e)=>{e.preventDefault();
navigate(`/about?name=${input}`);}}>
<label>이름</label>
<input type="text" name="name" onChange={
(e)=>{setInput(e.target.value);}}/>
<input type="submit" value="제출"/>
</form>
</div> );
}

위를 예시로 작성해 보았다. 참고로 이 때 useState를 쓰기 위해서는
import{useState} from 'react';를 추개해야한다.

일단 onChange로 값이 바뀔때마다 input에 넣은 값을 input 변수로 넣어준다.

navigate 함수로 이동할 위치를 지정해주는데 ${input}을 이용해서 input 값을 온전히 문자열로 넣어 준다.

상위에서 써줄 때에는 <컴포넌트이름/>으로 쓰던것처럼 쓰면 된다. import로 넣는것도 해야한다.

Posted by

dudghks9303

in