React

[TIL/React] 2023/05/12

src/pages/Profile.jsURL 파라미터를 사용하는 방법을 학습하기 위해 Profile 페이지 컴포넌트를 생성함src/App.jsApp.js에서 Profile 컴포넌트는, path에 username을 파라미터로 넘기고 있다. params 상수를 콘솔에 찍어봤

2023년 5월 12일1min read

B) URL 파라미터와 쿼리스트링

1. URL 파라미터

src/pages/Profile.js```


URL 파라미터를 사용하는 방법을 학습하기 위해 Profile 페이지 컴포넌트를 생성함

![](https://velog.velcdn.com/images/minkwan/post/f1f8ca69-0e74-4987-b584-e878481c0af0/image.png)

App.js에서 Profile 컴포넌트는, path에 ``username``을 파라미터로 넘기고 있다. params 상수를 콘솔에 찍어봤다.

파라미터로 넘긴 'username'이 객체의 key가 되고, 실제로 URL에 넘겨진 'minkwan'이 value가 되어, 새로운 형태의 객체가 반환되었음을 확인했다.

useParams()```는 URL에서 동적으로 변하는 파라미터 값을 가져올 수 있게 해주는 함수이고, 해당 함수를 통해 파라미터의 값을 객체 형태로 조회할 수 있게 된다.


![](https://velog.velcdn.com/images/minkwan/post/52143d9d-2a44-4ecd-b656-d448cace2d42/image.png)

따라서 profile은 위 코드의 주석과 동일하다.

profile 페이지로 이동할 수 있도록 Home 페이지에 Link를 만들었다.

2. 쿼리스트링

쿼리스트링 예시: /articles?q=react&lang=en

주소의 뒷 부분에 ``? 문자열`` 이후 key=value로 값을 정의하며 &로 구분하는 형태를 보인다. 키워드 검색이나 정렬 방식 등 데이터 조회에 필요한 옵션을 전달할 때 사용한다.

쿼리스트링을 화면에 띄워보는 작업을 해봤다.

src/pages/About.js```


About 페이지를 다음과 같이 수정했다.

![](https://velog.velcdn.com/images/minkwan/post/d372d3f7-6e20-43b2-b096-df648418b754/image.png)

useSearchParams()```는 현재 URL의 ```쿼리스트링 파라미터 값```을 가져오는 함수이다. 쿼리스트링 파라미터 값을 객체 형태로 반환한다.

About 페이지를 다시 수정했다.

여기서 주의점은, 쿼리파라미터를 조회할 때의 ``값`은 무조건 `문자열 타입``이어야 한다는 것이다. true 또는 false 값을 넣게 된다면 값을 비교할 때 꼭 따옴표로 감싸서 비교를 해야 하고, 숫자를 다루는 경우에는 parseInt를 사용하여 숫자 타입으로 변환을 해야한다.

C) 중첩된 라우트

중첩된 라우트랄 다룰 때에는 어떻게 해야 하는지에 대해서 학습했다. 우선, 게시글 목록을 '보여주는' 페이지와 게시글을 '읽는' 페이지를 만들었다.

src/pages/Articles.js```


![](https://velog.velcdn.com/images/minkwan/post/22e8b9b6-9414-4115-9d6f-c30c95595ee8/image.png)

src/App.js```


![](https://velog.velcdn.com/images/minkwan/post/2290d141-4808-4cc3-88f5-7dc68850b9b9/image.png)

게시글 목록 페이지로 가는 링크 추가

Outlet부터는 다음에