[React] Split Component

j.log·2021년 5월 27일
1

React

목록 보기
8/10

깃허브에서 로그인 후 마이페이지로 들어가면 바로 보이는 부분을 예시로 이 부분을 여러 개의 컴포넌트로 나눠보는 연습을 해보자



1. Split Components


보통 컴포넌트를 나눌 때에는 주로 기능별로 나눈다. 임의로 크게 4개의 컴포넌트로 나눴다.


1-1. GitPinnedContainer

  • GitPinnedHead 컴포넌트와 GitPinnedList 컴포넌트를 포함한 컴포넌트
  • 비슷한 기능을 가진 컴포넌트 전체를 감싸는 역할을 하여 다른 컴포넌트에서 사용될 수 있게 만든 컴포넌트

1-2. GitPinnedHead

  • Pinned 문구와 Customize your pins 버튼이 들어간 부분
  • 큰 기능은 없지만, 리스트 부분과 분리하여 가독성을 높이기 위해 나눈 컴포넌트

1-3. GitPinnedList

  • 여러 개의 GitPinnedItem을 감싸주는 역할을 함.
  • 리스트와 헤더를 분리하고, pinned 처리된 Repository 데이터를 받아 해당 데이터 수만큼 GitItem 컴포넌트를 렌더링하기 위해 나눈 컴포넌트

1-4. GitItem

  • GitItem에 들어가는 이름, 설명 등을 출력하기 위해 만든 컴포넌트
profile
jlog

0개의 댓글