인프런 커뮤니티 질문&답변

French님의 프로필 이미지
French

작성한 질문수

React 기반 Gatsby로 기술 블로그 개발하기

카테고리 목록 컴포넌트 구현하기

Link to 질문드립니다.

작성

·

128

1

<CategoryListWrapper>
      {Object.entries(categoryList).map(([name, count]) => (
        <CategoryItem
          to={`/?category=${name}`}
          active={name === selectedCategory}
          key={name}
        >
          #{name}({count})
        </CategoryItem>
      ))}
    </CategoryListWrapper>
  );

이 부분에서 to 경로에 ? 가 쓰이는 이유가 궁금해서 질문드립니다!

blogGatsby

답변 1

0

주현도님의 프로필 이미지
주현도
지식공유자

안녕하세요, 케냐더블에이님!

일단 너무 늦게 답변드린 점에 대해서는 정말 죄송하다는 말씀을 드리고 싶습니다.. ㅠㅠ

군부대 내 자가격리로 인해 그동안 쌓인 질문 리스트를 제대로 확인하지 못했네요

일단 to라는 이름의 props는 CategoryItem 컴포넌트 내에 존재하는 Link 컴포넌트에 연결할 링크를 의미합니다.

그럼 전체 URL은 https://domain-main.github.io/?category=Web 의 형태가 되겠네요.

여기서 ? 부분은 URL에서 Query String이라고 하는데요, URL 주소를 통해 파라미터의 형태로 데이터를 전달하는 것을 의미합니다.

그래서 저 링크로 접속을 하면 서버측에 { category: "Web" }의 형태로 Query String 값이 전달됩니다.

저희는 카테고리별로 목록을 띄워주기 위해 저런 형식으로 category이라는 이름의 Query String 부분을 추가했습니다.

그래서 받은 데이터를 통해 일치하는 카테고리 값만 표시해줄 수 있는 것입니다.

French님의 프로필 이미지
French

작성한 질문수

전체 Q&A
질문하기