[유민] 우당탕탕 평가모듈 만들기 대작전

[qhahd78]

안녕하세요? 이번에는 좀 최신 코드를 들고와봤습니다.

배경

한 달정도 전에 MAC 결과지에 쓰일 평가 모듈을 개발했었는데, 그때 시간이 매우매우매우 촉박했어서 큰 고민 하지 않고... 개발을 헀었는데, 막상 코드를 보니 글케 썩 맘에 들진 않더군요. 지금도 엄청 나쁜 코드는 아니지만 여러분들이라면 멋진 의견을 주실 것 같아 올려봅니다.

설명

1. 지원자 평가 탭

결과지 우측에 평가할 수 있는 패널을 만들었습니다. 평가는 등급을 선택(라디오 버튼)할 수도 있고, 텍스트를 직접 입력(text area)할 수도 있습니다. 추후에 라디오 버튼, 텍스트뿐만이 아니라 다른 사용자 입력 컴포넌트가 들어올 수도 있습니다.

이미 평가를 완료했으면 완료한 평가를 보여줍니다.

2. 평가 현황 탭

현재까지 진행된 평가 목록을 불러옵니다.

코드

1. 평가 탭 보여주기

• 탭 제목에 따라 유동적으로 탭을 보여주게 했습니다. form 을 보여주거나 평가 현황을 보여줍니다.
• form(react-hook-form 사용) 에는 formProvider 를 감싸서 props 전달 없이 input 컴포넌트 내에서 register 를 바로 사용하도록 했습니다.

  const renderEvaluationContent = () => {
    switch (selectedTitle) {
      case '지원자 평가':
        if (evaluationPaper)
          return (
            <FormProvider {...methods}>
              <EvaluationForm
                channelSeq={channelSeq}
                evaluationPaper={evaluationPaper}
                evaluationReview={evaluationReview}
              />
            </FormProvider>
          );
        else return <></>;
      case '평가 현황':
        if (evaluationPaper)
          return <EvaluationReview channelSeq={channelSeq} evaluationPaper={evaluationPaper} />;
        else return <></>;
      default:
        return <></>;
    }
  };

2. 평가 아이템 컴포넌트 (라디오 버튼, 텍스트박스 ... )

• 여기가 하이라이트입니다..... props 로 컴포넌트의 타입을 정의하고, 그 타입에 맞는 아이템을 리턴합니다.
• 작성/수정의 경우 컴포넌트를 리턴하고, 조회의 경우에는 단순 text 를 보여줍니다.

const EvaluationItem = ({ ...props }: EvaluationItemProps) => {
  const renderEvaluationItem = () => {
    switch (props.type) {
      case 'COMMENT':
        return <EvaluationTextarea groupPosition={props.groupPosition} />;

      case 'SELECTION':
        if (props.options)
          return (
            <EvaluationRadioButtonGroup
              groupPosition={props.groupPosition}
              options={props.options}
            />
          );
        else return <></>;

      case 'SCORE':
        return <EvaluationTextarea groupPosition={props.groupPosition} />;

      default:
        return <></>;
    }
  };

  return (
    <EvaluationItemView
      idx={
        props.groupPosition + 1 > 10
          ? String(props.groupPosition + 1)
          : `0${props.groupPosition + 1}`
      }
      title={props.title}
      item={
        props.isResultExist && props.resultText ? (
          <EvaluationTextBox>{props.resultText}</EvaluationTextBox>
        ) : (
          renderEvaluationItem()
        )
      }
    />
  );
};

export default EvaluationItem;

논의점

• switch 문이 맘에 안 들음 ... 개선할 방법이 있을까요 ?
• react-hook-form 의 formProvider 를 사용하는 것이 맞을지
• 삼항연산자로 컴포넌트를 렌더링 하는 것이 맞을지
• render 함수를 이용해서 컴포넌트를 렌더하는 것이 맞을지

[regularPark]

대장님 안녕하시렵니까?🫡 충성충성^^7
대장님께서 생각하시는 논의점 몇가지에 대한 제 생각 말씀 올려보겠읍니다.🙇‍♂️

switch 문이 맘에 안 들음 ... 개선할 방법이 있을까요 ?

네 일단 저는 early return을 애정하는 사람이며, switch문이 나쁘다고는 생각하지 않는 사람임을 먼저 밝힙니다.

if(!evaluationPaper) return <></>;

를 switch문 외부에 둘 것 같습니다. 그렇게 되면 case 내부의

else return <></>;

를 전부 없앨 수 있을 것처럼 보여요!

혹은 '지원자 평가', '평가 현황'을 key로 가지는 객체를 사용해도 될 것 같아보여요.

삼항연산자로 컴포넌트를 렌더링 하는 것이 맞을지

저는 조건부 렌더링에 삼항연산자를 쓰는거 좋아라합니다. 단 양자택일일때만.

++...props 대신 구조분해할당을 쓰면 코드가 더 깔끔해질 것 같아요. 가독성도 떨어지거니와 props에 어떤 친구들이 숨어있는지 EvaluationItemProps 를 한번 슥 봐줘야하니까 약속된 플레이가 되는 것 같아요.

[Wisesaturn]

빠라바라밤 리뷰어 송재한입니다 👾
저는 이렇게 여러 컴포넌트를 분기처리 하면서 보여줄 때 switch 보단 객체 형태로 묶어서 관리하곤 합니다!

const evaluationComponents = {
  COMMENT: EvaluationTextarea,
  SELECTION: EvaluationRadioButtonGroup,
  SCORE: EvaluationTextarea,
};

export default function Page({type} : PageType) {
   const Component = evaluationComponents[type];
  return (
    <Component />
  )
}

그러면 훨씬 더 새로운 형태의 타입을 추가하기도 쉽고, 간결해지는 장점이 있습니다!
대장님에게 조금이나마 도움이 되기를 바래봅니다... 😂

[bbearcookie]

안녕하십니까!! 대장님 ^^7
저는 중첩 컴포넌트 관점에서 리뷰를 하나 작성해봤습니다..

render 함수를 이용해서 컴포넌트를 렌더하는 것이 맞을지

컴포넌트 내에서 또 다른 함수 컴포넌트가 정의되어 사용되는 형태이기에, toss/slash의 useFunnel Hook처럼 render 컴포넌트의 결과를 메모이제이션 하기 위해 useMemo를 활용하거나, 혹은 render 역할을 수행하는 함수를 외부로 빼는 것도 좋다고 생각해요! 😊

리렌더링마다 새로운 함수가 평가되고 그에 따라 컴포넌트와 대응되는 파이버 노드가 새롭게 생성될 것이기에 리액트 공식 문서에서는 함수 컴포넌트의 중첩 정의를 지양하라는 내용과, 그 이유를 컴포넌트 트리에서의 상태 보존 관점에서 서술하는 내용이 있어서 이러한 내용을 한 번 공유해봅니당!!

[KyuTae98]

저도 삼항 연사자로 컴포넌트를 주는 방법에 대해 고민을 많이 했습니다.

삼항연산자와 css로 제어하는 방식으로 고민했었습니다.

dom tree를 형성할 때 삼항연산자는 렌더링을 하지 않아 브라우저에 더 좋더라고 하더라구요!

만약 대장님이 쫌 더 깔끔하게 작성하고 싶다면 고차컴포넌트를 이용하는 것도 좋을거 같습니다!!

const withConditionalRendering = (WrappedComponent) => {
  return (props) => {
    if (!props.condition) {
      return null;
    }
    return <WrappedComponent {...props} />;
  };
};

const ConditionalComponent = withConditionalRendering(Component);

항상 건강하십쇼 대장님!

[h1un]

1. switch 문이 맘에 안 들음 ... 개선할 방법이 있을까요 ?
   저도 습관적으로 switch 문을 쓸것같은데,
   재한님과 정규님이 주신 리뷰를 참고하여 한번 작성해보았습니다ㅎㅎ;;

const evaluationComponents = {
  COMMENT: EvaluationTextarea,
  SELECTION: EvaluationRadioButtonGroup,
  SCORE: EvaluationTextarea,
};

const EvaluationItem = ({ type, groupPosition, options,  title, isResultExist, resultText }: EvaluationItemProps) => {
  const Component = evaluationComponents[type];

  return (
    <EvaluationItemView
      idx={groupPosition + 1 > 10 ? String(groupPosition + 1) : `0${groupPosition + 1}`}
      title={title}
      item={isResultExist && resultText ? (
        <EvaluationTextBox>{resultText}</EvaluationTextBox>
      ) : (
        <Component groupPosition={groupPosition} options={options} />
      )}
    />
  );

3. 삼항연산자로 컴포넌트를 렌더링 하는 것이 맞을지
   코드가 복잡하지 않고 이해하기 쉬워 삼항연산자를 사용하는것이 좋을것같습니다.