스토리북 작성을 통해 얻게 되는 리팩토링 효과 | 카카오엔터테인먼트 FE 기술블로그

• 독립적인 환경에서 그립니다.

• 컴포넌트를 재사용하여 다시 그립니다.

• 과로: 하나의 컴포넌트에서 너무 많은 일을 하는 경우

• 발작 증세: 간혹 그려져서는 안되는 결과물로 그려지는 경우

• 피터팬 증후군: 독립해서 그려보니 의도와 다르게 그려지는 경우

과로: 하나의 컴포넌트에서 너무 많은 일을 하는 경우

/* BEFORE */

const Human = () => {
  // data fetching
  const [face, isLoading] = useFetch('face');
  // routing
  const router = useRouter();
  // state managing
  const health = useRecoilValue(healthAtom);
  // ... many side effects

  return (
    <>
      {'...'}
      {'...'}
    </>
  );
}

/* AFTER */
const Human = () => {
  // data fetching
  const [face, isLoading] = useFetch('face');
  // routing
  const router = useRouter();
  // state managing
  const health = useRecoilValue(healthAtom);
  // ... many side effects

  return (
    <>
      {'...'}
      <Eyes eyes={eyes} />      {'...'}
    </>
  );
};

/* BEFORE */
const Face = () => {
  const [face, isLoading] = useFetch('face');  return isLoading ? (    <>
      {'...'}
      {face}
      {'...'}
    </>
};


/* AFTER */
const FaceLoader = () => {    <Suspense fallback={<Loading />}>const FaceFetcher = () => {  const [face] = useFetch('face');  return <Face face={face} />;const Face = ({ face }) => {
  return (
    <>
      {'...'}
      {face}
      {'...'}
    </>
  );
};

발작 증세: 간혹 그려져서는 안 되는 결과물로 그려지는 경우

const Face = ({ eyesY }: { eyesY: number }) => {...}

const Face = ({ eyesY }: { eyesY: 'top' | 'middle' | 'bottom' }) => {...}

const Face = ({ classes }) => {
  return (
    <>
      <Eyes className={classes.eyes} />
      <Nose className={twMerge('mx-auto', classes.nose)} />
      <Mouse className={twMerge('bg-red', classes.mouth)} />
    </>
  );
};

const Face = ({ children }) => {
  return <>{children}</>;
};

const Eyes = () => <>{'...'}</>;
const Nose = () => <>{'...'}</>;

Face.Eyes = Eyes;
Face.Nose = Nose;

const AngryFace = () => (
  <Face>
    <Face.Eyes className="scale-x-50" />
    <Face.Nose className="bg-red" />
    {'...'}
  </Face>
);

피터팬 증후군: 독립해서 그려보니 의도와 다르게 그려지는 경우

<div className="relative h-50 w-100">
  <Thumbnail />
</div>

// Thumbnail.tsx
const Thumbnail = () => (
  <div className="absolute right-0 h-50 w-50">
    <img />
  </div>
);

const ChapterTitle = () => {
  <div className="pt-34">
    <InnerContent />
  </div>;
};

const ChapterTitle = () => <InnerContent />;

<div className="pt-34">
  <ChapterTitle />
</div>;

예시 3. 부모나 전역 환경에 항상 존재할 것이라고 가정하고 참조하는 경우

const Component = () => {
  const { openModal } = useModal(); // 전역에 선언된 모달을 띄워준다.
  <button onClick={() => openModal()} />;
};

const Component = ({ onOpenModal }) => <button onClick={() => onOpenModal()} />;