[과제] React Router
React Router
: 사용자가 요청한 주소를 감지하고 그 주소로 연결해주는 역할이다.
라우터의 주요 컴포넌트로 <BrowerRouter>, <Link>, <Routes>, <Route> 가 있다. ( 모두 대문자로 시작한다. )
다운방법으로는 터미널창에 npm i react-router-dom 입력하면 된다.
다운 후 package.json 에서 dependencies에 다운이 됐는지 확인하면 된다.
BrowerRouter
:React Router 를 사용하고 싶은 곳을 <BrowserRouter>컴포넌트로 감싸줘 환경설정을 해줄 수 있다.
보통 Main.jsx에서 <APP>컴포넌트를 감싸주면 어디서든 사용이 가능하다
아래 예시 )
감싸지 않고 사용시 컴포넌트나 함수 사용시 적용이 되지않는다.
Link
: <Link> 컴포넌트와 to 속성을 사용해서 이동하고 싶은 주소로 이동할 수 있다.
이때, <Link> 컴포넌트는 <a> 요소로 표시되지만 (HTML에서는 a요소 사용시 새로고침이 발생한다.) 새로고침은 발생하지 않고 주소만 변경된다.
=> <Link to=""> </Link>
import로 router와 data파일을 가져온 후 data파일을 순회 한 후(map으로 순회할때 반드시 키값을 지정해준다.) data에 있는 element의 이미지와 이름을
뿌려준다.
뿌려준것들 <Link>로 감싸줘 뿌려진li요소 클릭시 /detail로 이동할 수 있게 지정해주고 그 뒤에는 해당하는 element.id로 쿼리스트링 값을 넣어준다.
아래 사진은 위 코드를 적용한 모습이다.
id 0을 가진 고양이를 클릭시 쿼리스트링 detail/ 뒤에 ${el.id}가 붙은걸 확인할 수 있다.
Routes
:<Route>를 묶어주는 역할
Route
: 특정 주소에서 어떤 컴포넌트를 보여줄지 정해주는 역할이다.
Route 컴포넌트에 path 와 element요소를 사용해준다.
=> <Route path="" element={<div> </div>}>
path속성에는 경로, element에는 컴포넌트를 넣어준다.
파일 위치와 루트적용 모습이다.
' 경로가 /(첫화면)에 있을때 Main.jsx 내에 있는 Main을 보여준다. ' 라는것을 <Route>로 감싸준것이다.
아래에 동일하게 detail과 search에도 적용해 주고 상위 컴포넌트Routes로 감싸주었다.
다음으로는 React Router의 주요 함수이다.
useNavigate()
: 특정 주소로 이동할 수 있게 해주는 함수를 생성해준다.
const navigate = useNavigate ()
Link를 사용해 클릭으로 단순페이지 이동이 가능하지만 useNavigate()를 이용해 이벤트 핸들러 안, 조건 검사 등을 거친 후 특정 주소로 이동할 때 사용한다.
검색할 수 있는 <input>에 입력 받는 상태를 useState에 지정 후 그 받는 값에 해당하는 주소로 이동하기 위해 useNagative에도 변수 선언해준다.
위와 같이 변수로 선언해준 후 <input>에 입력 받는 값과 이벤트 핸들러는 상태변경함수로 지정해준다.
<button>을 클릭시 특정 주소로 이동을 위해 navigate함수를 사용해 주소 설정을 해준다.
/search?animal=${inputValue}
여기서 search는 ?를 포함한 쿼리 스트링 값이고 animal='입력 값' 을 받고싶은거니 ${inputValue}를 넣어준다.
만약 123을 검색을 했을 경우 주소는 /search?animal=123 이 나오게 된다.
useLocation ()
:현재 페이지의 위치 정보를 담고있는 객체를 생성해준다.
const location = useLocation ()
useLocation의 종류로는
- hash : 주소의 #문자열 뒤의 값
- pathname : 현재 주소 경로
- search : ?를 포함한 쿼리스트링
- state : 페이지로 이동시 임의로 넣을 수 있는 상태 값
- key : location 객체의 고유 값, 초기값은 default, 페이지가 변경될 때 마다 고유의 값이 생성된다
가 있다. ex) location.pathname ,location.search
useParams ()
: 주소의 쿼리 파라미터 값을 담은 객채를 생성한다.
const params = useParams ()
먼저, find() 메서드는
배열에서 특정 값을 찾는 조건으로 callback함수을 통해 조건에 맞는 값 중 첫번째 값을 리턴한다.
useParams로 url의 파라미터들을 가져온다.
예를 들면 URL이 /detail/3 이러면 params.id는 "3"이 된다.
data 배열에서 params.id와 같은 id를 가진 동물을 찾는다. 이때 el.id는 숫자열, params.id은 문자열을 반환하기 때문에 Number로 숫자열로 변경해 비교해준다.
접근하는 id에 해당하는 동물 정보를 찾아서 보여주는 상세페이지가 된다.
이렇게 useParam은 해당하는 위치 정보를 담고있는 객체를 생성하고 호출시 문자열로 들어오게 된다.
그러니 숫자열과 비교할때 꼭 숫자열로 바꿔줘야한다.
useSearchParams ()
: 주소의 쿼리 스트링 값을 가져올 수 있는 객체와 수정할 수 있는 함수를 생성한다.
const [searchParams, setSearchParams] = useSearchParams ()
useSearchParams로 URL 쿼리스트링의 'animal'을 가져온다.
만약 /detail/animal=고양이 이면 param은 고양이가 출력된다.
getRegExp로 한글 초성까지 검색매칭이 가능한 정규식으로 바꿔준다. 예를 들면 '고'만 검색을 해도 고양이가 나온다.
filter를 통해 동물의 이름을 정규식을 검사해 그 검색어가 포함 된 동물들만 추려낸다.
