Skip to main content

2024/03/06

일지 기록#

info

컴포넌트 분리의 필요성과 컨테이너 구분의 기준


[ 2024/03/06 ]

🧐 Problem#

이번 스프린트에 초대 관련 화면중 1/3 을 맡게 되었는데, 초대 관련 컨테이너의 구분이 필요해보인다.

또 내가 만든 초대 컨테이너에서 header 정보가 복잡하게 main JSX 문에 있었어서 별도의 컴포넌트로 분리가 필요해 보인다는 피드백에 대해서 수정이 필요할 것 같다.

👀 Analysis#

<div className={classes.headerText}>          {isUser ? (            <Typography className={classes.title} variant="h4">              {t('common.user')}            </Typography>          ) : (            <Typography className={classes.title} variant="h4">              {t('label.partner')}            </Typography>          )}          <button className={classes.button}>            <img              className={classes.arrow}              src={`${process.env.PUBLIC_URL}/images/admin/welcome/arrow.png`}              alt="arrow"            />            <Typography variant="body12">{t('button.init')}</Typography>          </button>        </div>

이렇게 header 정보가 메인 JSX return 에 있으면 추후에 복잡해질 경우 분리가 필요할 수도있고 스타일도 세분화 가 가능하기때문에

가독성 높은 코드로 제공될 필요성이 있다.

🌈 Solution#

const Header = (props: { isUser: boolean }): JSX.Element => {    const { isUser } = props;    const headerTitle = isUser ? t('common.user') : t('label.partner');    const classes = useStyles();
    const data = isUser ? selectedTeamsAndUsers : selectedPartnersAndGroups;
    return (      <div className={classes.headerText} onClick={(): void => handleRemoveAll(data)}>        <Typography className={classes.title} variant="h4">          {headerTitle}        </Typography>        {isInvite && (          <button className={classes.button}>            <img              className={classes.arrow}              src={`${process.env.PUBLIC_URL}/images/admin/welcome/arrow.png`}              alt="arrow"            />            <Typography variant="body12">{t('button.init')}</Typography>          </button>        )}      </div>    );  };

이렇게 동일한 .tsx 파일 내에서 컴포넌트를 분리하면 된다.

🎯 Outcome#

복잡한 return JSX 가 아니라 어떤 용도들로 구성되어있고 컴포넌트가 어떻게 구성되어있는지 명확하게 알 수 있었다.

👼 Reflection#