태그된 유니온과 커스텀 타입가드를 이용한 다른 컴포넌트 랜더링

return (
    <div>
      {IntroductionData && IntroductionData.list[0] && (
        <>
          {isTourist(IntroductionData.list[0]) && (
            <IntroductionTourist data={IntroductionData.list[0]} />
          )}
          {isCultural(IntroductionData.list[0]) && (
            <IntroductionCultural data={IntroductionData.list[0]} />
          )}
          {isFestival(IntroductionData.list[0]) && (
            <IntroductionFestival data={IntroductionData.list[0]} />
          )}
          {isTourCourse(IntroductionData.list[0]) && (
            <IntroductionTourCourse data={IntroductionData.list[0]} />
          )}
          {isLeports(IntroductionData.list[0]) && (
            <IntroductionLeports data={IntroductionData.list[0]} />
          )}
          {isAccomodation(IntroductionData.list[0]) && (
            <IntroductionAccomodation data={IntroductionData.list[0]} />
          )}
          {isShopping(IntroductionData.list[0]) && (
            <IntroductionShopping data={IntroductionData.list[0]} />
          )}
          {isRestaurant(IntroductionData.list[0]) && (
            <IntroductionRestaurant data={IntroductionData.list[0]} />
          )}
        </>
      )}
    </div>
  );

 

그렇다 지저분해도 너무 지저분하다! 가독성이 너무 안좋다. 내가 작성 했던 state 값에 따른 다른 페이지 랜더링 방법과 태그된 유니온을 이용하여 가독성 좋은 컴포넌트 랜더링을 할 수 있게 수정 해보겠다.
[작성블로그](https://threeyears.tistory.com/515)