[JSX] 조건에 따른 JSX 작성 패턴 - if, switch, object 구조

리액트에서 JSX 작성 중에 조건문이 필요할 때 주로 삼항연산자를 사용하고, case가 다양할 때에는 switch문을 사용하는 편이다. 삼항 연산자가 워낙에 간편하다 보니 if 문을 사용한적이 없는 것 같은데, 아래처럼 사용할 수 있다.

 

1. JSX 내에서 if 문

function Component() {
	return (
    	<section>
      {(() => {
        if (someCase) {
          return (
            <div>someCase</div>
          )
        } else if (otherCase) {
          return (
            <div>otherCase</div>
          )
        } else {
          return (
            <div>catch all</div>
          )
        }
      })()}
    </section>
    )
}

 

2. JSX 내에서 switch 문

function Component() {
	return (
    	<div>
      {(() => {
        switch (status) {
          case 'info':
            return <Info text={text} />;
          case 'warning':
            return <Warning text={text} />;
          case 'error':
            return <Error text={text} />;
          default:
            return null;
        }
      })()}
    </div>
    )
}

 

3. JSX 내에서 object 구조 사용하기

switch 문과 비슷한 상황에서 사용할 수 있는데, switch 문보다 좀 더 깔끔한 느낌이 든다.

function Component() {
    const [phase, setPhase] = useState(1)
    return (
        <div>
          {
            { 
               1 : <p>1단계</p>,
               2 : <p>2단계</p>,
               3 : <p>3단계</p>
            }[phase]
          }
        </div>
    )
}