Closed hansol775 closed 4 years ago
어느덧 프로젝트를 진행한지 6주가 되었는데요, 코드리뷰 하기 적당하게 코드가 나온 것 같아서 살펴봤습니다! 우선 src/pages/RegisterPage.js 코드가 코드리뷰하기 적절해서 코드리뷰를 해보았습니다.
// src/pages/RegisterPage.js const RegisterPage = () => { const { page } = useSelector((state) => state.pageNumber); return ( <AuthTemplate title={ page < 3 ? '회원가입' : page === 6 ? '냥이 정보 등록' : page === 7 ? '집사정보 등록' : page === 8 ? '우리 동네 인증' : null } > {page <= 3 ? ( <SignUpContainer /> ) : page <= 6 ? ( <CatProfileImageContainer /> ) : page <= 7 ? ( <ServantInfoContainer /> ) : page <= 8 ? ( <ServantInfoAddressFormContainer /> ) : null} </AuthTemplate> ); };
title이 page의 number에 따라 변화하도록 잘하셨는데요, 이 코드를 위에서 상수로 관리하면 편리하게 관리할 수 있습니다.
const RegisterPage = () => { const { page } = useSelector((state) => state.pageNumber); const title = page < 3 ? '회원가입' : page === 6 ? '냥이 정보 등록' : page === 7 ? '집사정보 등록' : page === 8 && '우리 동네 인증' return ( <AuthTemplate title={title} > {page <= 3 ? ( <SignUpContainer /> ) : page <= 6 ? ( <CatProfileImageContainer /> ) : page <= 7 ? ( <ServantInfoContainer /> ) : page <= 8 ? ( <ServantInfoAddressFormContainer /> ) : null} </AuthTemplate> ); };
이 방법도 있지만 다중 삼항 연산자 자체가 보기에 깔끔하지 않기에 취향에 따라 다른 방법도 택하면 됩니다.
const RegisterPage = () => { const { page } = useSelector((state) => state.pageNumber); const titles = [ 'null page', 'null page', 'null page', '회원가입', 'null page', 'null page', '냥이 정보 등록', '집사정보 등록', '우리동네 인증', ] return ( <AuthTemplate title={titles[page]} > {page <= 3 ? ( <SignUpContainer /> ) : page <= 6 ? ( <CatProfileImageContainer /> ) : page <= 7 ? ( <ServantInfoContainer /> ) : page <= 8 ? ( <ServantInfoAddressFormContainer /> ) : null} </AuthTemplate> ); };
return 안의 삼항연산자도 아래 방법으로 좀 더 깔끔하게 쓸 수 있습니다.
const RegisterPage = () => { const { page } = useSelector((state) => state.pageNumber); const titles = [ 'null page', 'null page', 'null page', '회원가입', 'null page', 'null page', '냥이 정보 등록', '집사정보 등록', '우리동네 인증', ] const stepContents = [AnotherScreen, AnotherScreen2, AnotherScreen3, SignUpContainer, AnotherScreen4, AnotherScreen5, CatProfileImageContainer, ServantInfoContainer, ServantInfoAddressFormContainer, AuthTemplate]; const currentStepContent = () => { const ComponentName = stepContents[page]; return <ComponentName />; }; return ( <AuthTemplate title={titles[page]} > {currentStepContent()} </AuthTemplate> ); };
훨씬 보기 깔끔하네요ㅎㅎㅎ 유레카입니다🙇🏻🙇🏻🙇🏻
어느덧 프로젝트를 진행한지 6주가 되었는데요, 코드리뷰 하기 적당하게 코드가 나온 것 같아서 살펴봤습니다! 우선 src/pages/RegisterPage.js 코드가 코드리뷰하기 적절해서 코드리뷰를 해보았습니다.
컴포넌트 파라미터 오브젝트 정의
title이 page의 number에 따라 변화하도록 잘하셨는데요, 이 코드를 위에서 상수로 관리하면 편리하게 관리할 수 있습니다.
이 방법도 있지만 다중 삼항 연산자 자체가 보기에 깔끔하지 않기에 취향에 따라 다른 방법도 택하면 됩니다.
컴포넌트 이름 정의
return 안의 삼항연산자도 아래 방법으로 좀 더 깔끔하게 쓸 수 있습니다.