React : 에서 자주 쓰는 if문 패턴 5가지 (if, 삼항연산자, &&, switch, object)

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

컴포넌트에서 JSX를 조건부로 보여주고 싶을 때 사용한다.
if문은 return()안의 JSX내에서는 사용이 불가능하므로 보통 아래처럼 return+JSX를 뱉는 if문을 작성해 사용한다.

function Component() {
  if ( true ) {
    return <p>참일시 노출될 HTML</p>;
  } else {
    return null;
  }
}

else 생략하는 법

return을 만나면 코드가 종료되므로 이렇게 축약 가능하다.

function Component() {
  if ( true ) {
    return <p>참일시 노출될 HTML</p>;
  }
  return null;
}

---

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

jsx 내(return 내)에서 쓸 수 있다.

조건문 ? 조건문 참일때 실행할 코드 : 거짓일 때 실행할 코드

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참일시 노출될 HTML</p>
        : null
      }
    </div>
  )
}

삼항연산자 중첩 사용

아래는 1 === 1은 항상 참이라서 2 === 2는 검사되지 않지만, 중첩사용 방법만 보자.
그리고 이것보단 return문 바깥에 if else 쓰는게 더 나은듯?

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>1 === 1는 항상 참이므로 매번 노출된다.</p>
        : ( 2 === 2 
            ? <p>참일시 ...</p> 
            : <p>거짓일시 ...</p> 
          )
      }
    </div>
  )
}

---

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

js에서 &&는 양쪽이 true일 시 true를 남기고, 아닐 시 false를 남긴다.

그러나 boolean형이 아닌 자료형을 넣으면 아래와 같다.

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

자바스크립트는 &&로 연결된 값들 중 처음 등장하는 falsy 값을 찾고, 그게 아니면 마지막값을 남긴다.

원리는 아래와 같다.

1. 만약 첫 번째 피연산자가 false로 평가되는 값이면, false가 반환된다. 그리고 두 번째 피연산자는 평가되지 않고 무시된다.
2. 첫 번째 피연산자가 true로 평가되는 값이면, && 연산자는 두 번째 피연산자를 평가하고 그 결과를 반환한다.

---

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p> <!-- 삼항연산자 -->
        : null
      }
    </div>
  )
} 

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

위 두 예제는 동일한 역할을 한다. 위처럼 변수가 참이면 html를 뱉고 거짓이면 null을 뱉는 식의 조건부 코드를 많이 쓴다.

---

4. switch / case 조건문

switch는 if문을 연달아쓰는 것에 비해 코드가 줄어들고 가독성이 좋지만,
조건식에서 변수 하나만 검사할 수 있는 것이 단점이다.

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

---

5. object / array 자료형 응용

경우에 따라 다른 html을 보여주고 싶은 경우, if문 여러개 혹은 삼항연산자 여러개를 작성하는 대신 이렇게 할 수 있다.

object 자료형으로 html을 담은 후 마지막에 object() 뒤에 []대괄호를 붙여 key값을 설정하여 key값이 현재상태인 자료를 남기도록 한다.

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

위 코드를 아래처럼 변수에 저장해서 써도 된다.

var 탭UI = { 
  info : <p>상품정보</p>,
  shipping : <p>배송관련</p>,
  refund : <p>환불약관</p>
}

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        탭UI[현재상태]
      }
    </div>
  )
}

---

출처 : 코딩애플 https://codingapple.com/