inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

Link 속성 질문드립니다.

190

jjang9

작성한 질문수 36

1

 

const CategoryItem = styled(({ to, active, ...props }: GatsbyLinkProps) => (
  <Link to={to} {...props} />
)
...
여기서 Link에 to와 props는 왜 전달해줘야 하는지 이해가 잘 되지않습니다

const CategoryList: FunctionComponent<CategoryListProps> = function ({
  selectedCategory,
  categoryList,
}) {
  return (
    <CategoryListWrapper>
      {Object.entries(categoryList).map(([name, count]) => (
        <CategoryItem
          to={`/?category=${name}`}
          to는 여기에서만 지정해줘도 되지 않나요??

          active={name === selectedCategory}
          key={name}
        >
          #{name}({count})
        </CategoryItem>
      ))}
    </CategoryListWrapper>
  )
}

Gatsby blog

답변 1

1

주현도

안녕하세요, juuu o님!

 

저 코드는 아래와 같이 수정했었는데, 강의에서는 반영을 하지 못했네요 ㅠㅠ

 

만약 여기서 active 파라미터를 제외한 나머지 props만 따로 Link 컴포넌트에 넘겨주는 이유는, Link Props의 타입 때문입니다.

Link Props 중에서 active 라는 값은 받도록 설정이 되어있지 않기 때문에 만약 위와 같이 분리하여 넘겨주지 않는다면 CategoryItem 컴포넌트에서 타입 에러가 발생하게 됩니다.

좋은 질문 감사드립니다!

0

jjang9

답변 감사합니다!!

 

쿼리오류 Field "thumbnail" must not have a selection...

1

872

1

타입스크립트를 설정할 때 jsxPragma 옵션을 뺀 이유는 무엇인가요?

1

605

1

마지막 배포 부분 질문드립니다!

1

623

1

'[username]/[username].github.io' -> 'username/reponame'

0

344

0

IntersectionObserver deploy( gatsby build) 시 오류(자답)

1

399

1

PostHead.tsx BackgroundImage 동작오류(자답)

1

296

0

19강 인피니티 스크롤 IntersectionObserver 코드 위치 수정이 필요합니다.

1

411

1

썸네일 이미지 제작 및 학습 방법 관련 문의

1

446

1

배포 후 포스트 업로드 방법

1

386

1

배포 질문이요!

1

528

1

gatsby develop 오류

1

940

1

깃허브 레퍼지토리 질문드려요

1

344

1

특정 게시글을 클릭하여 상세 페이지로 넘어가는 과정과 SPA에 관한 질문

1

285

1

Unhandled Runtime Error 가 뜹니다

0

506

2

sign in with GitHub 클릭 시

1

394

3

동작 반복 시 오류

1

351

2

const BackgroundImage 질문

1

212

1

오타 문의

1

305

2

Props로 받아 포스트 데이터 출력하기가 안됩니다.

1

203

1

index.tsx allMarkdownRemark 에러..

0

595

2

스네이크 케이스로 변수명을 짓는 이유

1

251

1

'Tagged Template Literal 방식을 통해 정의한 CSS 적용 방법'에서 발생하는 문제

3

353

2

상단 이미지를 썸네일 사용하지않고 다른 이미지를 쓰고싶습니다

1

284

1

여기까지 했는데 runtime 에러가 발생합니다

2

286

1