react if문 작성패턴 5개

1. 컴포넌트 안에서 쓰는 if/else

if/else문은 return문 안에서는 사용이 불가능하다. 다음과 같은 방법으로
return문을 다르게 주는 방식은 가능하다.

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

return문을 다르게 주는 방식은 가능하다.

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

아래는 위와 동치이다. 얼리리턴을 활용한 코드이다.

2. JSX안에서 쓰는 삼항연산자

if문은 사용할 수 없지만 ?을 활용한 삼항연산자는 사용이 가능하다.

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

3. &&연산자로 if역할 대신하기

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

4. switch/case 조건문

function Component(){
  let user = 'seller';
  if(user === 'seller'){
  return <h4>판매자 로그인</h4>
  }else if (user === "customer"){
    return <h4>구매자 로그인</h4>
  }else{
  return <h4>그냥 로그인</h4>}
}

위의 if문은 다음과 같이 switch/case 문으로 바꿀 수 있다.

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

5. object/array 자료형 응용

다음과 같이 object나 array에 내가 보여주고 싶은 태그를 넣은 후
상태를 key값으로 변화시켜 해당 키의 값을 보여주는 방식을 사용할 수 있다.

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

다음과 같이 변수에 저장하면 더 깔끔해 보인다.

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