1. 구현하기
진행 상황
- 상세페이지 리뷰 레이아웃
- 상세페이지 예약 레이아웃
진행 예정
- 팀원 도와주기
- CSS 통일화
2. TIL
2-1. 상수 관리의 중요성
라우팅을 상수로 관리하기
그동안 라우팅과 엔드포인트를 직접 입력했었는데 그렇게 하니 변경사항이 있었을 때 찾아서 하나하나 변경해주어야 하는 것이 너무 힘들었다. 멘토님의 조언을 따라 라우팅과 엔드포인트를 상수로 관리하니 한결 유지보수가 수월해졌고, 오타도 방지되었다.
<Route path={LOGIN} element={<Login />} />매직넘버를 상수로 관리하기
매직넘버는 특정 계산을 하기 위한 수식에 기준이 되는 특정 정의된 수치값이다. 이번 개발에서는 미용실 상세페이지 홈 탭에서 매장 소개 컨텐츠에서 특정 글자수가 넘으면 더보기라는 버튼이 활성화 되는데 이때 특정 글자수를 직접 입력하곤 했었다.
만일 그 수치가 변경되게 되거나 휴먼 이슈, 혹은 숫자의 의미를 전달하기 힘들어서 보통 상수로 관리하는 것을 추천하여 그 부분을 리팩토릭 해보았다.
{comment.length > maxLen && (
<S.CommentButton onClick={handleToggle}>
{show ? '접기' : '더보기'}
</S.CommentButton>
)}2-2. 옵셔널 체이닝 사용하기
옵셔널 체이닝이란
옵셔널 체이닝(?.)은 비교적 최근에 나온 문법으로 객체에 정보가 없을 수도 있다고 가정했을 때 map으로 렌더링 할 때 에러를 방지하기 위해서 정보가 없을 때도 고려하여 아래와 같이 코드를 작성하곤 했다.
data ? data.filter((dog) => dog.id === 1) : null;?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다. 위의 코드를 옵셔널 체이닝으로 바꾸면 아래와 같다. 옵셔널 체이닝으로 리팩토링하니 확실히 한결 코드가 간결해보인다.
?. ‘앞’ 평가 대상에만 동작되고, 확장은 되지 않는다. 그러므로 왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용하는 것이 좋다.
data?.filter((dog) => dog.id === 1);옵셔널 체이닝과 구조분해할당
옵셔널 체이닝과 구조분해할당을 같이 사용하면 보다 더 코드를 간결하게 작성 가능하다. 위 코드에서 객체 분해 할당 문법을 사용하여 id 값만 추출하여 필터링할 수 있다. ({ id }) 구문은 data 배열의 각 요소를 객체 분해하여 id 값만 추출한다. 따라서 id === 1이 참인 객체만 필터링한다.
const filteredData = data?.filter(({id}) => id === 1);