오늘은 평소보다 등록할 요소가 많은 게시판 등록폼을 구현하는 중이었다.
평소에는 input의 값만 존재했다면 이번 등록폼은 옵션, 인풋 라디오 타입 등이 들어가 코드가 매우 길어졌는데 코드가 매우 길어지다보니 자연스레 테스트 코드를 어떻게 짜야하지..? 라는 의문이 들었다.
테스트 코드도 목적을 가지고 짜기
테스트를 할 때에도 아 테스트 코드가 중요하다던데라는 의무감에서 작성하는 것이 아니라 어떤 것을 테스트해야하고 어느 범위까지 테스트 할것인가를 정해야한다는 필요성을 점점 짜면서 느꼈다. ( 아무래도 코드의 복잡성도 증가해서 그런듯 ) 그래서 테스트 코드를 짜거나 코드의 가독성을 위해서 컴포넌트로 분리해야하는 필요를 느꼈다.
어느정도 범위로 분리할 것 인가?
option 태그를 가진 것들 그 자체로 복잡도가 높아서 컴포넌트화 시키고 싶었지만 다른 일반 input 태그들은 어느정도 범위로 묶어 컴포넌트화를 시킬지 고민이 되었다.
그리고 만일 컴포넌트로 분리를 한다면 그 컴포넌트들을 가진 상위 컴포넌트에서는 어느 정도의 테스트까지만 해줄 것인가? 라는 의문도 들었다. ( 하위 컴포넌트들을 다 테스트 해줘도 상위에서도 똑같이 다 해줘야한다면 테스트 코드의 중복이니까 말이다.)
일단은 나만의 기준을 가지고 짜보자
일단 모든 요소를 다 컴포넌트로 분리한다면 그것만큼 낭비는 없을 것 같고 옵션 태그처럼 복잡도가 높은 것은 따로 분리를 하고 나머지는 조금 큼지막한 의미단위로 나누어서 분리를 먼저 해보려고 한다. 그리고 트레이너 분께 피드백을 받고 수정하면서 어떻게 분리를 하고 테스트의 범위를 정할지를 알아보자!
옵션만 넣어도 코드가 이미 복잡하다.
<InputBox>
<label htmlFor="input-category">이벤트 카테고리</label>
<select id="input-category" onChange={(e) => eventFormStore.changeCategory(e.target.value)}>
<option defaultValue="카테고리없음">버튼을 눌러 카테고리를 추가하세요</option>
<option value="IT/기술">IT/기술</option>
<option value="스타트업">스타트업</option>
<option value="커리어">커리어</option>
<option value="취미">취미</option>
<option value="디자인">디자인</option>
<option value="비즈니스">비즈니스</option>
<option value="음식&음료">음식&음료</option>
<option value="프로그래밍">프로그래밍</option>
<option value="홈&라이프스타일">홈&라이프스타일</option>
<option value="여행">여행</option>
<option value="자기계발">자기계발</option>
<option value="스포츠">스포츠</option>
<option value="금융">금융</option>
<option value="건강">건강</option>
<option value="마케팅">마케팅</option>
<option value="파티">파티</option>
<option value="독서">독서</option>
</select>
</InputBox>
게다가 수많은 요소를 넘겨서 코드가 더 복잡한데... 해결할 방법이 있을까? 웬만한 서비스는 이보다 도 더 많이 보내야 할 것 같은데
const handleSubmit = (event) => {
const {
title,
date,
host,
price,
hostEmail,
hostContact,
onOrOffline,
eventType,
category,
homepageAddress,
imgUrl,
hashTags,
content,
} = eventFormStore;
댓글