[React] React에서 if 구문 사용하기

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

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

 

자바스크립트 if문은 return () 안의 JSX 내에서는 사용할 수 없다.

<div> if (조건) {실행문} </div>    =>   (X)

그래서 보통 return + JSX 전체를 가지는 if문을 사용한다. 

 

 

+ 주로 else 생략

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

 

 

 

 

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

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

삼항연산자는 if와는 다르게 JSX 안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용한다.

삼항연산자는 중첩 사용도 가능하나 가독성이 좋지 않기 때문에 사용을 지향하는 게 좋다.

 

 

 

 

3. && 연산자

html을 조건부로 보여줄 때 자주 사용한다.

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

function Component() { // 위와 동일한 기능을 함
  return (
    <div>
      { 1 === 1 && 참이면 보여줄 HTML }
    </div>
  )
}

 

&& 연산자로 조건식과 오른쪽 JSX 자료를 비교하여 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남는다.

왼쪽 조건식이 false면 false가 남는다. false가 남으면 HTML로 렌더링하지 않는다.(null을 return 하는 것과 같음)

 

 

 

 

4. switch / case 조건문

if문을 연달아 여러 개 써야되는 상황들이 있을 때,  switch 문법을 이용하면 괄호를 조금 더 줄일 수 있다. 

function Component(){
  var selected = 'shirts';
  switch (selected){
    case 'shirts' :
      return <p>셔츠</p>
    case 'pants' :
      return <p>바지</p>
    default : 
      return <p>신발</p>
  }
}

 

 

조건식에서 변수 하나만 검사할 수 있다는 단점이 있다. 

 

 

 

 

5. object/array 자료형 응용 

경우에 따라서 다른 html 태그들을 보여주고 싶은 경우 object 또는 array를 응용하여 조건부 렌더링을 할 수 있다.

 

var products = { 
  shirts : <p>셔츠</p>,
  pants : <p>바지</p>,
  shoes : <p>신발</p>
}

function Component() {
  var selected = 'shirts';
  return (
    <div>
      {
        products[selected]
      }
    </div>
  )
}

object 자료형으로 HTML을 담은 다음, object 뒤에 [] 대괄호를 붙여 key값이 selected인 자료를 뽑는다.

변수의 값에 따라서 원하는 HTML을 보여줄 수 있다.