강의

멘토링

로드맵

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

케냐더블님의 프로필 이미지
케냐더블

작성한 질문수

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

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

Link to 질문드립니다.

작성

·

145

1

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

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

퀴즈

EmotionJS를 styled-components 대신 선택하는 주된 이유는 무엇일까요?

렌더링 속도 향상이 월등하기 때문

라이브러리 번들 용량이 상대적으로 작기 때문

CSS 문법 자동 완성 기능이 뛰어나기 때문

별도의 설정 없이 서버 사이드 렌더링을 완벽히 지원하기 때문

답변 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 부분을 추가했습니다.

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

케냐더블님의 프로필 이미지
케냐더블

작성한 질문수

질문하기