RegisterPage 코드리뷰

어느덧 프로젝트를 진행한지 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>
  );
};

dnd-side-project / dnd-mentee-3rd-6-repo

RegisterPage 코드리뷰 #67

컴포넌트 파라미터 오브젝트 정의

컴포넌트 이름 정의