TINU-77 feat: Step1 컴포넌트 구현

[juheehasaeyo]

🔥 Related Issues

• close TINU-77 feat: 회원가입 - Step1 #24

✅ 작업 내용

• 회원가입 4단계에 따라 변하는 StepIcon 컴포넌트 제작
• 회원가입 1단계에 사용되는 Checkbox 컴포넌트 제작
• 회원가입 절차에 따른 문구들을 상수로 관리하기 위해 constant>index.ts 생성

📸 스크린샷 / GIF / Link

_Step1.mp4

📌 이슈 사항

전체 동의/ 선택적 동의를 각각 클릭했을 때의 체크박스와 하단의 다음 버튼 활성화 여부가 Step1 컴포넌트의 주요 기능입니다!
해당 pr이 머지되면 Step2 컴포넌트 issue를 새로 팔 예정입니다!!

✍ 궁금한 것

특히 체크박스 전체동의/선택적 동의 로직에 대한 확신이 없습니댜... 피드백 부탁드립니당🤩

[jungwoo3490]

첨부된 영상을 보시면 아시겠지만 체크박스를 클릭할 때마다 불필요한 리렌더링이 많이 발생하고 있어요. 이걸 최적화해봐도 좋을 것 같아요!!

지금 체크 유무에 따라 버튼의 활성화여부가 결정되어야 하기 때문에 체크박스와 버튼의 가장 가까운 공통된 부모 컴포넌트에서 체크 상태를 관리하게 하고 있는데, 공통 부모가 페이지 레벨 컴포넌트이다 보니 체크가 하나 변경될때마다 페이지 내 모든 컴포넌트가 리렌더링되고 있어요.

메모이제이션을 통해 리렌더링 최적화를 할 수도 있는 부분이지만 메모리 측면에서 성능 저하가 있을 수도 있고 부모에서 상태를 관리하게 되면 부모 컴포넌트 자체는 항상 불필요한 렌더링을 하게 돼요. 좋은 방법은 아니라고 생각합니다!!

구조적인 변경으로 이 문제를 해결해볼 수 있을 것 같아요. 부모 컴포넌트가 아니라 각 CheckBox 컴포넌트에서 자신의 체크 여부를 각각 state로 관리하는 거예요. 그러면 체크가 눌렸을 때 그 체크박스만 리렌더링이 일어나게 될 거예요.

여기까지는 해결이 되었지만, Button의 활성화 여부가 각 CheckBox의 체크 여부 상태에 의존하고 있어요. 그러면 결국 CheckBox의 체크 상태를 부모에서 가져와서 검증을 해야 하는 구조인데, 가져올 때 useRef를 사용할 수 있을 것 같아요.

부모에서 각 체크박스에 대한 ref를 각각 생성해주는 거에요. 그러고 각 CheckBox에 ref prop을 넘기고, CheckBox에는 ref를 받아 체크박스에 연결해주면 돼요. 그러고 CheckBox의 onClick 핸들러에 3개의 체크박스의 isChecked 값을 가져와서 활성화 여부를 검증하는 로직을 추가해주면 될 것 같아요. 그러려면 CheckBox는 ref를 prop으로 받기 위해 forwardRef()로 감싸져야 할 거예요.

(++ 현재 체크박스가 div Element로 구현되어 있는데 요고 input type="checked"로 변경하는 게 의미론적으로 더 맞는 것 같네요!)

이런 구조로 간다면 체크를 누르면 해당하는 CheckBox 컴포넌트만 리렌더링될 것이고, 버튼은 활성화 여부가 변경될때만 리렌더링될거예요. 이렇게 구조변경을 통해 최적화해볼 수 있을 것 같네요!!!

보기보다 조건부 로직이 까다로운 뷰일텐데 잘 해준 것 같네요!! 고생 많았어요!! 🚀🚀🚀 리뷰 확인 부탁드려요!!! 😃