[moin-review] 2021-11-09

Facts

• 공통 input 에서 css 버그 발견하여 수정함
• prop drilling 경감 시키기 위해 refactoring 함

Findings

• svg 같은 경우 아얘 크기가 지정되어 있기 때문에 span, 이나 div 등의 크기 설정으로 조절하기 힘들다.
• input 같은 UI 의 경우 크기를 100% 로 설정해 놓고 사용하는 div 쪽에서 grid 나 flex 등으로 크기를 조절하는 게 낫다.

Feelings

관심사 분리를 위해 컴포넌트를 쪼개고 쪼개다 보니 딱히 하는일 없고 prop 만 전달하는 중간 prop 유통 ? 컴포넌트가 생기게 되었다.

결국 prop 을 추가하거나 수정할 때 일이 많아지기 했고 프로젝트가 마무리 되기전에 고쳐야 한다는 생각을 했다.

어제 찾은 kent c dodds 블로그( Application State Management with React (kentcdodds.com) 를 참고해서 수정을 해보았다.

prop 만 전달하는 컴포넌트를 없애고 하위컴포넌트 자체를 부모 컴포넌트에 prop 으로 전달해서 중간 유통단계를 없앴다.

before

송금 단계에 따라 prop 을 전달해주는 컴포넌트가 있었음

const RemitFormRouter = ({ step, remitComponent, remitForm }: RemitFormRouterProps) => {
  const { countryCode } = remitComponent

  const { state, onSelectMethod, onChangeRecipientField, onSelectAccountType } = remitForm

  const { method, recipient, accountType } = state

  switch (step) {
    case 'recipient-list':
      return <RemitRecipientListPage />

    case 'method':
      return (<RemitMethodPage
        countryCode={countryCode}
        method={method}
        onSelectMethod={onSelectMethod}
      />)

    case 'recipient':
      return (
        <RemitRecipientForm
          recipient={recipient}
          onChangeRecipientField={onChangeRecipientField}
          onSelectAccountType={onSelectAccountType}
          countryCode={countryCode}
          method={method}
          accountType={accountType}
        />
      )

    case 'edd':
      return <RemitEddForm />

    case 'review':
      return <RemitReviewForm />

    default:
      return <Redirect to='/' />
  }
}

export default RemitFormRouter

const RemitRecipientForm = ({
  recipient,
  onChangeRecipientField,
  onSelectAccountType,
  countryCode,
  method,
  accountType,
}: RemitRecipientFormProps) => (
  <React.Fragment>
    <FormTitle
      title='받는 분 정보를 입력해 주세요'
      description='빠른 송금을 위해 정보를 정확히 입력해 주세요.'
    />
    <RecipientFormRouter
      recipient={recipient}
      countryCode={countryCode}
      method={method}
      accountType={accountType}
      onChangeRecipientField={onChangeRecipientField}
      onSelectAccountType={onSelectAccountType}
    />
  </React.Fragment>
)

after

단순 prop 전달의 역할을 하는 RemitRecipientForm 에서는 prop 으로 받아온 컴포넌트를 출력만 하고

const RemitRecipientForm = ({ formTitle, formRouter }: RemitRecipientFormProps) => (
  <React.Fragment>
    {formTitle}
    {formRouter}
  </React.Fragment>
)

export default RemitRecipientForm

원래 RemitRecipientForm 울 호출하는 부분에서 FormTitle 과 RecipienFormRouter 을 호출하는 것으로 변경했음

const RemitFormRouter = ({ step, remitComponent, remitForm }: RemitFormRouterProps) => {
  const { countryCode } = remitComponent

  const { state, onSelectMethod, onChangeRecipientField, onSelectAccountType } = remitForm

  const { method, recipient, accountType } = state

  switch (step) {
    case 'recipient-list':
      return <RemitRecipientListPage />

    case 'method':
      return (
        <RemitMethodPage
          formTitle={<FormTitle title='송금방식을 선택해 주세요' />}
          formRouter={<MethodFormRouter
            countryCode={countryCode}
            method={method}
            onSelectMethod={onSelectMethod}
          />}
          countryCode={countryCode}
        />
      )

    case 'recipient':
      return (
        <RemitRecipientForm
          formTitle={<FormTitle
            title='받는 분 정보를 입력해 주세요'
            description='빠른 송금을 위해 정보를 정확히 입력해 주세요.'
          />}
          formRouter={
            <RecipientFormRouter
              recipient={recipient}
              countryCode={countryCode}
              method={method}
              accountType={accountType}
              onChangeRecipientField={onChangeRecipientField}
              onSelectAccountType={onSelectAccountType}
            />
          }
        />
      )

    case 'edd':
      return <RemitEddForm />

    case 'review':
      return <RemitReviewForm />

    default:
      return <Redirect to='/' />
  }
}

export default RemitFormRouter

하위 컴포넌트에도 위 방법을 적용하려고 했지만 하위 컴포넌트에서는 단순 prop 전달 뿐만이 아닌 국가, 받는사람 종류, 송금방법 에 따라 form 을 다르게 출력하는 역할이 있어 prop drilling 이 다소 되더라도 관심사 분리를 위해 별도로 분리하는 게 맞다고 판단되어 수정하지 않았다.