[React] 자주쓰는 if 작성패턴 5가지

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

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

component안에 jsx를 조건부로 보여주고 싶으면 이렇게 씀.

자바스크립트 if문의 return()안에 jsx내에서는 자용 불가 → 즉, <div>if(어쩌구){저쩌구}</div>가 불가능

그래서 보통 return + JSX 전체를 뱉어내는 if문을 작성해 사용함

📎else와 중괄호를 생략 가능

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

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

조건문 ? 참일 때 실행 코드 : 거짓일 때 실행 코드 이 형식에 맞추서 쓰면 됨

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

jsx내에서 if/else대신 쓸 수 있다는게 장점
삼항연산자는 if문과 다르게 jsx안에서 실행 가능하고 조건을 간단히 주고 싶을 때 사용

삼항연산자의 중첩 사용

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : ( 2 === 2 
            ? <p>안녕</p> 
            : <p>반갑</p> 
          )
      }
    </div>
  )
} 

남이 읽었을 때 + 나중에 읽었을때 보기 힘든코드는 좋지 않음
그냥 return 밖에 ifelse쓴 다음 결과를 변수에 저장해서 저기 집어넣는게 나을 듯

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

js에서의 &&연산자

true && false ;    //false
true && true ;     //true

왼쪽 오른쪽 둘 다 true면 전체를 true로 변경할때 씀

근데 true/false가 아닌 자료형을 넣으면

true && '안녕' ;    //'안녕'
false && '안녕' ;     //false
true && false && '안녕' ;     //false

리엑트에서 약간 exploit하면 if문을 더 간략하게 쓸 수 있음

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

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

위 두 예저는 동일한 역할을 함

밑의 예제를 보면 &&연산자로 조건식과 오른쪽 jsx자료를 비교하고 있음.

이 때, 왼쪽 조건식이 true면 오른족 jsx가 자리에 남고 왼쪽 조건식이 false면 false가 남음
(false가 남으면 html로 렌더링하지 않음)

"만약에 이 변수가 참이면<p></p>, 참이아니면 null"이런 상황에 자주 쓸 수 있는 간단한 조건문

4. switch / case 조건문

기본 문법인데 중첩 if문 여러개 있을 경우 가끔 씀

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

이렇게 연달아 if문을 여러개 써야하는 상황에서 switch를 쓰면 더 간단하게 짤 수 있음

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

1. switch(검사할 변수){}
2. 중괄호 안에 case 검사할 변수가 이거랑 일치하냐 :
3. 일치하면 case밑의 코드 실행
4. default : 는 else와 동일한 기능

장점 : if문 연달아 쓸 때 코드가 줄어듦
단점 : 조건식란에 변수 하나만 검사할 수 있음.

5. object/array 자료형 응용

경우에 따라 다른 html태그들을 보여주고 싶은 경우

if문 여러개 혹은 삼항연산자를 여러개 작성하지않고 도 구현할 수 있음.

예를 들어 쇼칭몰에서 상품설명부분을 탭(상품정보/배송정보/환불약정..)으로 만들려고 함

현재 state가 info면 <p>상품정보</p>
현재 state가 shipping이면 <p>배송정보</p>
현재 state가 refund면 <p>환불약관</p>
이렇게 작성하고 싶은 것!

일단 state를 만들고 if문으로 state검사 문법을 쓰는 방법이 아니라 자바스크립트 object자료형에 내가 보여주고 싶은 html을 다 담음

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

    </div>
  )
} 

(원래 jsx상에서 html태그들을 obejct나 array에 담아도 됨.)
암튼 이렇게 object자료형으로 html을 다 정리해서 담은 다음
마지막에 object{}뒤에 []대괄호를 붙여 "key값이 현재 상태인 자료를 뽑음"이라고 써놓는 거임

그럼 현재상태라는 변수의 값에 따라 원하는 html을 보여줄 수 있음.

• 만약 var 현재상태가 'info'면 info 항목에 저장된 <p>태그가 보여지고
• 만약 var 현재상태가 'refund'면 refund 항목에 저장된 <p>태그가 보여지게 됨

혹은 변수에 저장해서 써도 깔끔해질 것 같음

이렇게!

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