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

1. component 안에서 쓰는 if else

component에서 JSX를 조건부로 보여주고 싶으면 이렇게 쓴다.

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

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

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

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

3항 연산자는 중첩 사용도 가능하다.

단점. 가독성이 나쁘다.

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

3. && 연산자

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

// javascript 문법
true && '안녕';			// '안녕'
false && '안녕'; 			// false
true && false && '안녕';	// false

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

// 위 3항 연산자를 아래처럼 사용할 수 있다.
function Component(){
  return (
    <div>
      { 1 === 1 && <div>참이면 보여줄 HTML</div> }
    </div>
  )
}

왼쪽 조건이 false면 false를 반환하는데, false는 HTML로 렌더링하지 않는다.

4. switch / case 문

if문을 중첩해서 사용해야 할 경우 switch / case문을 사용하면 괄호 양을 조금 더 줄일 수 있다.

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을 보여주고 싶은 경우에 사용한다.
JSX 상에서 html 태그들은 Object에 담든, Array에 담든 아무 상관이 없다.

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

변수에 담아 더 간단하게 사용할 수도 있다.

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

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

6. ?. 옵셔널 체이닝 연산자

optional chaining ?. 을 사용하면 객체에 에러 없이 안전하게 접근할 수 있다.
?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고, null이나 undefined가 아니라면 평가를 계속한다.

let user = {};

console.log( user?.address?.street );	// undefined, 에러가 발생하지 않는다.