반응형
파라미터 (Parameter)
정해지지 않은 값: 함수나 메서드를 정의할 때 어떤 값을 받을지 미리 지정해 놓은 이름
인자 (Argument)
정해진 값: 함수가 실제로 호출될 때 파라미터에 전달되는 값입니다. 인자는 구체적인 값으로, 함수가 이 값을 가지고 작업을 수행
Path Parameter와 Query Parameter의 차이점
- Path Parameter ( /pokemon-detail/:id 형식 )
- url 뒤에 동적 값을 포함한다.
- useParams 를 통해 동적 파라미터를 가져와 처리한다. - Query Parameter ( /pokemon-detail?id=1 형식)
- url 뒤에 ? 를 사용하여 추가적인 데이터를 넣는다.
- useLocation 과 URLSearchParams 를 통해 쿼리 파라미터를 읽어 처리한다.
두 파라미터의 선택 기준
- 리소스를 식별할 때: 패스 파라미터를 사용하여 URL 경로에 리소스의 고유 ID를 포함하는 것이 일반적입니다. 예: /users/123는 ID가 123인 사용자에 대한 정보를 제공한다.
- 필터링, 검색, 추가 옵션 제공: 쿼리 파라미터를 사용하여 필터 조건이나 검색어, 페이지 번호 등을 전달하는 것이 일반적입니다. ex) /products?category=clothing&sort=price_asc.
- URL의 의미 명확화: 패스 파라미터는 URL이 더 직관적이고 의미를 가지도록 도와줍니다. 쿼리 파라미터는 추가 정보를 명시적으로 전달할 때 유용합니다.
예시
- 사용자 상세 페이지:
- 패스 파라미터: /users/:id → /users/123
- 사용자 ID 123의 프로필 페이지로 직접 이동.
- 제품 리스트 페이지:
- 쿼리 파라미터: /products?category=electronics&sort=price_asc
- 전자 제품 카테고리를 가격순으로 정렬하여 표시.
반응형
'코딩 > React 본 캠프' 카테고리의 다른 글
[본 캠프 32일차] 팀 프로젝트 시작 (0) | 2024.08.28 |
---|---|
[본 캠프 31일차] 개인 과제 제출 + 과제 해설 (0) | 2024.08.27 |
[본 캠프 29일차] React 스탠다드반 강의 + 추가 복습 + 과제 (0) | 2024.08.23 |
[본 캠프 28일차] React 숙련 강의 마무리 + 개인과제 (0) | 2024.08.22 |
[본 캠프 27일차] React 스탠다드 5차 수업 (0) | 2024.08.21 |