[React] 리액트 조건문 작성패턴

자주 쓰는 if문 작성 패턴에 대해서 공부했다.

 

컴포넌트 안에서 쓰는 조건문

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } else {
    return null;
  }
}

 

JSX안에서 쓰는 삼항연산자

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
}

이거랑 같은 의미의 코드가

function Component() {
  return (
    <div>
      { 1 === 1 && <p>참이면 보여줄 HTML</p> }
    </div>
  )
}

이다

 

저 조건식이 참이면 html을 보여주고 아니면 false가 남는다.

 

 

그다음에는 swtich case 조건문

function Component2(){
  var user = 'seller';
  switch (user){
    case 'seller' :
      return <h4>판매자 로그인</h4>
    case 'customer' :
      return <h4>구매자 로그인</h4>
    default : 
      return <h4>그냥 로그인</h4>
  }
}

 

 

 

만약에 state로 탭같은 걸 만들고 싶다면

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        { 
           info : <p>상품정보</p>,
           shipping : <p>배송관련</p>,
           refund : <p>환불약관</p>
        }[현재상태]
      }

    </div>
  )
}

이런식으로 object를 만들어 놓고

'현재상태' 라는 변수로 탭을 전환시키도록 한다.