일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 |
Tags
- 화살표2개
- 부모요소의 패딩 무시
- twoarrow
- ignore padding
- 문제해결
- 이즐 #ezl #욕나오는 #교통카드
- vite
- QueryClient
- 리액트
- react
- createPortal
- BlockFormattingContext
- tailwindCSS
- accordian
- parent padding
- transition
- 제어컴포넌트
- DOM
- BFC
- Carousel
- ?? #null병합연산자
- 조건부스타일
- debouncing
- es6
- alias설정
- CustomHook
- 함수형프로그래밍
- 부모패딩
- 서초구보건소 #무료CPR교육
- useQueryClient
Archives
- Today
- Total
프론트엔드 첫걸음
useLocation 본문
import { useLocation } from "react-router-dom";
const location = useLocation();
console.log(location);
hash : 주소의 # 문자열 뒤의 값 (주로 History API가 지원되지 않는 구형 브라우저에서 클라이언트 라우팅을 사용할 때 쓰는 해시 라우터에서 사용)
key : location 객체의 고유 값, 초기에는 default 이고, 페이지가 변경될 때마다 고유의 값이 생성됨.
pathname : 현재 주소의 경로 (쿼리스트링 제외)
search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값 //http://경로?id=10&count=2022 인경우 'id=10&count=2022'
URLSearchParams 사용하면 URLSearchParams객체.get("키") 로 쿼리 취득가능
import React from 'react'; import { useLocation } from 'react-router-dom'; // http://localhost:3000/query?id=10&count=2022 로 접속 상황 function Query() { // useLocation() 호출 const location = useLocation(); console.log(location); // {pathname: '/query', search: '?id=10&count=2022', hash: '', state: null, key: 'default'} // search 부분을 URLSearchParams 객체로 생성 const searchParams = new URLSearchParams(location.search); // const searchParams = new URLSearchParams(useLocation().search); // 이것도 가능 // 쿼리 취득 const id = searchParams.get('id'); // id 취득 const count = searchParams.get('count'); // count 취득 console.log('id: ', id); // id: 10 console.log('count: ', count); // count: 2022 return <div>Query</div>; } export default Query;
state : 페이지로 이동할 때 임의로 넣을 수 있는 상태 값
navigate할때 넘어온 state 객체 조회 가능하다.import { useNavigate } from 'react-router-dom'; export default function Test() { const navigate = useNavigate(); // 버튼 클릭시 호출 const move = () => { // 두번재 인자의 state 속성에 원하는 파라미터를 넣어준다. (id, job을 넣어봤다) navigate('/test2', { state: { id: 1, job: '개발자' } }); }; return ( <div> <button onClick={move}>이동</button> </div> ); }
import { useLocation } from 'react-router-dom'; export default function Test2() { const {state } = useLocation(); const id = state.id; const job = state.job; return ( <div> <p>id: {id}</p> <p>job: {job}</p> </div> );
예제 참고한 사이트
https://curryyou.tistory.com/477
'개발 공부 > React' 카테고리의 다른 글
[React Router] useBlocker 이해하기 (0) | 2025.03.03 |
---|---|
김민태 프론트엔드 강의 - React 만들기 (0) | 2023.03.11 |
forEach(parent.appendChild.bind(parent)) 이해하기 (0) | 2023.03.03 |
[칼럼] React 컴포넌트를 커스텀 훅으로 제공하기 (0) | 2023.02.22 |
QueryClient 대신 useQueryClient 사용하는 이유 (0) | 2023.02.20 |