[React] React.js 조건문 - IF 문

React를 개발 시 JSX 또는 일반 코드 작성 시에 조건문인 IF/ELSE를 사용하는 경우가 있습니다. React에서는 컴포넌트에 render 함수가 필요하며 JSX로 Return을 해줘야 하기에 IF문 또는 Switch문 사용이 제한이 있습니다. 그렇기에 삼항 연산자 또는 &&연산자를 많이 사용하게 됩니다. React에서는 IF 조건문을 어떻게 사용하는지 알아보도록 하겠습니다.

 

React IF/ELSE 문

React에서 IF/ELSE문을 사용하려면 컴포넌트에서 JSX를 조건에 따라서 작성해야만 합니다.

function Component() {
  if ( true ) {
    return <p>Component True</p>;
  } else {
    return null;
  }
}

 

React 삼항연산자

삼항 연산자란 React의 JSX에서 주로 사용되는 언어입니다. 삼항 연산자는 중첩 사용도 가능합니다. 하지만 단점으로는 익숙하지 않은 코드로 인하여 불편할 수 있습니다.

//삼항연잔자 문법
조건 ? [조건이 참인경우 코드] : [조건이 거짓인경우 코드]


function Component() {
  return (
    <div>
      {
        2 === 1
        ? <p>Component 첫번째 조건 True.</p>
        : ( 2 === 2 
            ? <p>Component 첫번째 조건 Fales! Component 두번째 조건 True.</p> 
            : <p>Component 첫번째 조건 Fales! Component 두번째 조건 Fales!</p> 
          )
      }
    </div>
  )
}

 

React &&연산자

React에서 사용하는 &&연산자는 자바스크립트에서 사용되는 &&연산자와 다르게 사용됩니다. &&연산자는 조건문이 True일 경우에만 동작하는 ELSE가 없는 조건문이라고 생각하면 쉽습니다. 간단한 조건문인 경우에 많이 사용됩니다.

function Component() {
  return (
    <div>
      {
        1 === 1 && <p>Component가 True 인경우</p>
      }
    </div>
  )
}

 

React switch/case 조건문

React에서 사용하는 switch/case 조건문 경우에는 redux에서 reducer함수에서 action의 type를 다룰 때 많이 사용되는 조건문입니다.

1. switch (조건) {statement}

2. statement 안에 case를 나눠줍니다.

3. 해당 case에서 실행되는 statement는 콜론 이후에 작성합니다.

4. default는 어떠한 case에도 만족하지 않는 경우에 처리할 로직에 대해서 작성하게 됩니다.

//reducer에서 사용되는 switch/case문
function reducer(state, 동작){
  switch (동작.type) {
    case '증가' :
    //증가 return 값
	  return {
        ...state,
        number: state.number + 1,
      }
    case '감소' : 
    //감소 return 값
	  return {
        ...state,
        number: state.number - 1,
      }
    default : 
      return state
  }
}

 

React 오브젝트 자료형을 응용한 enum

enum이란 enumerated type(열거형)을 의미합니다.

enum은 집합을 명명하고 이를 사용하도록 하는 주요 식별자입니다.

react의 enum이란 경우에 따라서 다른 HTML을 보여주고 싶을 때 사용하도록 합니다. 조건에 따라서 페이지를 각각 보여주고 싶을 때 사용하게 됩니다.

var UI = { 
	home : <a>홈</a>,
  	login : <a>로그인</a>,
  	register : <a>회원가입</a>  
}

function Component(state) {
  //var state = 'info';
  return (
    <div>
      {
        UI[state]
      }
    </div>
  )
}