Intro
쿠팡 서비스에 사용되는 컴포넌트를 만들었습니다.
- 2회차 과제는 다음과 같습니다.
Button
Button.tsx
버튼 컴포넌트의 우선 사항은 2가지였습니다.- 컴포넌트의 재사용성
즉, 하나의 컴포넌트로 모든 유형의 버튼을 표현해야 함 - 불필요한 상태 로직 지양
- 컴포넌트의 재사용성
Button.styled.ts
각 버튼의 유형에는 중복되는 스타일이 많았습니다. 따라서 중복되는 스타일을 변수로 관리해 최대한 스타일의 중복 코드를 줄이려고 했습니다.
Input
- 인풋 컴포넌트는 인풋 이름, 인풋 유효성, 인풋 포커스 등 다양한 조건에 따라 UI가 달라져야 했습니다.
따라서 인풋 그 자체를 나타내는Input.tsx와 인풋의 가이드(텍스트)를 나타내는InputGuide.tsx로 컴포넌트를 분리해 관심사를 분리해 가독성을 높이고자 했습니다.
Check
- 다른 컴포넌트와 마찬가지로 불필요한 상태 로직을 지양하고
props를 받아 화면을 그리는 체크박스를 구현했습니다. 체크 컴포넌트는 외부로부터 주입되는 초기값이 있으면 useEffect 라이프사이클 메서드에서props를 받아 자기의state로 관리하게 됩니다.
CheckGroup
- 쿠팡 회원가입 페이지의 체크박스 포함관계 구현이 어려웠습니다. 각 체크박스는 체크했을 때와 체크를 해제했을 때를 기준으로 다른 체크박스에 영향을 끼치도록 만들었고, 포함 관계에 대해선
tuneParentChecks라는 함수를 통해 구현해줬습니다. - 현재 포함관계가 각 체크박스의 label로 하드코딩 되어 있는데 이후, 리팩토링을 통해 상하 관계를 나타낼 수 있는 프로퍼티를 추가해 불필요한 하드코딩을 제거할 예정입니다.
Outro
- 이번주는 컴포넌트 개발에 많은 시간을 할애하지 못했습니다. 조만간 리팩토링을 통해 코드를 개선해 프로젝트의 완성도를 높여야겠습니다.
