[React] 조건부 렌더링 enum 패턴

주절 주절

마이페이지에서 메뉴 버튼을 눌렀을 때 조건부 렌더링으로 선택된 메뉴 페이지를 보여주는 기능을 구현하고 있었다. 메뉴가 4개? 정도여서 삼항 연산자나 &&연산자를 사용할 수 없었다. 그래서 마음에 들지는 않지만 if else나 switch case로 지저분하게 구현을 해야 하나 하다가 구글링을 하다 찾은 방법이 바로 enum 패턴 if else 패턴으로 작성한 코드를 enum 패턴으로 바꾸니 코드가 정말 깔끔하고 간결해졌다!

사용법

기존 코드 🤬

const SelectMenu = ({ selectMenu }) => {
  if (selectMenu === healthSurvey) {
    return <HealthSurvey />;
  } else if (selectMenu === subscription) {
    return <Subscription />;
  } else if ...
};

기존의 코드는 if else 패턴으로 작성했었다. props로 전달받은 selectMenu에 따라서 조건부 렌더링으로 다른 컴포넌트가 렌더 되도록 했었다. 가독성이 떨어지고 코드가 너무 지저분하다. 🤬

enum 패턴 ✨

const pages = {
  healthSurvey: <HealthSurvey />,
  subscription: <Subscription />,
  ...
};

const SelectMenu = ({ selectMenu }) => {
  return <div>{pages[selectMenu]}</div>;
};

기존의 if else 패턴으로 작성한 코드보다 훨씬 간결하고 깔끔하다! 객체를 만들어 그 안에 키, 값 형식으로 값에 컴포넌트를 넣고 키를 통해 해당 컴포넌트를 렌더하면 된다! 그리고 변수를 통한 조건부 렌더링도 가능하다 👼