1. 페이지 이동하기: useNavigate() Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 할 때 사용하는 hook으로, 사용자가 로그인되지 않은 상태에서 마이 페이지에 들어가려고 할 때 로그인 페이지로 리다이렉트 시키려는 상황에 쓰일 수 있음. import { useNavigate } from 'react-router-dom'; const App = () => { const navigate = useNavigate(); // ... } 해당 hook을 쓰려는 컴포넌트 내부에서 useNavigate()를 실행하면 리다이렉트에 사용할 수 있는 함수를 반환함. 이때 반환된 함수는 두 개의 parameter를 가지는데 // ① ② navigate("../To", { replace: true, s..
1. URL 파라미터 이용하기: useParams() A. URL 파라미터 ID나 이름 등을 이용해 특정 데이터를 조회할 때 사용하는 값으로, 주소에 유동적인 값을 넣어줄 수 있음. /path/urlParam 부분이 URL 파라미터. 예를 들어, https://www.last.fm/music/Taylor+Swift, https://www.last.fm/music/BTS, ...에서 Taylor+Swift, BTS, ...가 URL 파라미터. URL 파라미터마다 Route 컴포넌트를 하나하나 전부 만든다면 무척 비효율적. React Router의 useParams()을 이용하면 일일히 링크 세부 키워드를 지정하지 않고도 해당 컴포넌트로 이동할 수 있음. B. Route 컴포넌트의 path 속성에 URL 파..
JavaScript/기타 라이브러리 2022. 9. 23. 20:08
1. 페이지 이동하기: useNavigate() Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 할 때 사용하는 hook으로, 사용자가 로그인되지 않은 상태에서 마이 페이지에 들어가려고 할 때 로그인 페이지로 리다이렉트 시키려는 상황에 쓰일 수 있음. import { useNavigate } from 'react-router-dom'; const App = () => { const navigate = useNavigate(); // ... } 해당 hook을 쓰려는 컴포넌트 내부에서 useNavigate()를 실행하면 리다이렉트에 사용할 수 있는 함수를 반환함. 이때 반환된 함수는 두 개의 parameter를 가지는데 // ① ② navigate("../To", { replace: true, s..
JavaScript/기타 라이브러리 2022. 9. 23. 20:06
1. URL 파라미터 이용하기: useParams() A. URL 파라미터 ID나 이름 등을 이용해 특정 데이터를 조회할 때 사용하는 값으로, 주소에 유동적인 값을 넣어줄 수 있음. /path/urlParam 부분이 URL 파라미터. 예를 들어, https://www.last.fm/music/Taylor+Swift, https://www.last.fm/music/BTS, ...에서 Taylor+Swift, BTS, ...가 URL 파라미터. URL 파라미터마다 Route 컴포넌트를 하나하나 전부 만든다면 무척 비효율적. React Router의 useParams()을 이용하면 일일히 링크 세부 키워드를 지정하지 않고도 해당 컴포넌트로 이동할 수 있음. B. Route 컴포넌트의 path 속성에 URL 파..