KFE1 사전과제

React를 사용한 KernelRent 클론코딩 페이지입니다.

기술 스택

• React
• JavaScript
• React Router
• styled-components
• Lucide icons

컴포넌트 설계 시 고려한 부분 및 이유

• 서로 다른 시각적 요소 또는 반복되거나 특정 기능을 수행하는 요소를 컴포넌트로 분리하였습니다.
• 컴포넌트 초기화 시 색상을 props로 전달해 페이지 테마를 쉽게 변경할 수 있도록 구현하였습니다.

컴포넌트 재사용성 평가

• 시각적 요소를 중심으로 분리했기 때문에 비슷한 템플릿을 사용하게 될 경우 재사용성이 높지만, 레이아웃 구성이 달라진다면 활용이 어려울 것으로 생각됩니다.

컴포넌트를 설계하며 어려웠던 점

• styled-components 태그 이름 짓기
• 컴포넌트 분리의 기준
• 재사용성을 높이기 위한 설계
• show all / show more 로직 구현