본문 바로가기

코딩/React 본 캠프

[본 캠프 30일차] 개인 과제 최종

반응형

파라미터 (Parameter)

정해지지 않은 값: 함수나 메서드를 정의할 때 어떤 값을 받을지 미리 지정해 놓은 이름

 

인자 (Argument)

정해진 값: 함수가 실제로 호출될 때 파라미터에 전달되는 값입니다. 인자는 구체적인 값으로, 함수가 이 값을 가지고 작업을 수행

 

Path Parameter와 Query Parameter의 차이점

  • Path Parameter ( /pokemon-detail/:id 형식 )
    - url 뒤에 동적 값을 포함한다.

    - useParams 를 통해 동적 파라미터를 가져와 처리한다.

  • Query Parameter ( /pokemon-detail?id=1 형식)
    - url 뒤에 ? 를 사용하여 추가적인 데이터를 넣는다.

    - useLocation 과 URLSearchParams 를 통해 쿼리 파라미터를 읽어 처리한다.

두 파라미터의 선택 기준

  1. 리소스를 식별할 때: 패스 파라미터를 사용하여 URL 경로에 리소스의 고유 ID를 포함하는 것이 일반적입니다. 예: /users/123는 ID가 123인 사용자에 대한 정보를 제공한다.
  2. 필터링, 검색, 추가 옵션 제공: 쿼리 파라미터를 사용하여 필터 조건이나 검색어, 페이지 번호 등을 전달하는 것이 일반적입니다. ex) /products?category=clothing&sort=price_asc.

  3. URL의 의미 명확화: 패스 파라미터는 URL이 더 직관적이고 의미를 가지도록 도와줍니다. 쿼리 파라미터는 추가 정보를 명시적으로 전달할 때 유용합니다.

예시

  • 사용자 상세 페이지:
    • 패스 파라미터: /users/:id → /users/123
    • 사용자 ID 123의 프로필 페이지로 직접 이동.
  • 제품 리스트 페이지:
    • 쿼리 파라미터: /products?category=electronics&sort=price_asc
    • 전자 제품 카테고리를 가격순으로 정렬하여 표시.

 

 

반응형