[React] JSX에서 Switch문 사용하는 방법

퍼블리싱 진행 하다가 경우에 따라 다른 팝업창을 띄워주는 경우가 있었는 데

한두번 일 때는 삼항연산자를 사용해도 가독성면에서 큰 불편함음

경우의 수가 많아질 수록 가독성도 떨어지고, 불필요한 코드가 많아질 것 같아 Switch문을 사용하기로 했다.

 

Java나 Spring, Python 배울 때 Switch문을 사용 했었는 데 React의 JSX에서 사용하려니 오류가 발생했다.

 

구글에 "JSX에서 Switch문 사용하는 방법"을 검색 해보니

JSX에서 if문 대신 삼항연산자를 사용하고 for문 대신 배열 연산자 등을 사용하는 것처럼

Switch문도 다른 문법을 사용한다고 한다.

 

아래 블로그를 참고하였는 데 아직 문법을 이해 하지는 못했지만 간단해서 좋았다.

{(() => {
            switch (game) {
              case "start":
                return <Start handleClick={handleClick} />;
              case "playing":
                return <Playing handleClick={handleClick} />;
              case "won":
                return <Won handleClick={handleClick} />;
              case "lost":
                return <Lost handleClick={handleClick} />;
              default:
                return null;
            }
          })()}

---

전환 할 사례. React에서 Switch 문 사용.