리액트에서 자주쓰는 if문 작성패턴 5가지

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

// 올바른 예시, else생략도 가능
function Component(){
  if( true ){
  	return <p>참이면보여줄HTML</p>;  
  } else {
  	return null;
  }
}

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

• 자바스크립트의 if문은 return()안의 JSX내에서는 사용 불가능하다.
  → <div> if{~~}{~~} </div> 이 안된다는 것
• 보통 return + JSX 전체를 반환하는 if문을 작성해서 사용한다.

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

조건문 ? 조건이 참일 경우 실행될 코드 : 조건이 거짓일 경우 실행될 코드

function Component(){
  return (
    <div>
      {
        1 === 1 // 조건
        ? <p> 참일 경우 보여줄 HTML </p>
        : null
      }
    </div>
  )
}
// 삼항연산자는 중첩사용도 가능하다.
function Component(){
  return (
    <div>
      {
      	1 === 1
        ? <p> 첫번째 참일 경우 보여줄 HTML </p>
        : ( 2 === 2
        	? <p> 두번째 조건이 참일 경우 보여줄 HTML </p>
           	: <p> 두번째 조건이 거짓일 경우 보여줄 HTML </p>
        )
      }
    </div>
  )
}

• JSX 내에서 if/else 대신 쓸 수 있다.
• 삼항연산자는 조건을 간단히 주고싶을 때 사용하자.
• 삼항연산자는 중첩사용도 가능하지만 코드 가독성이 좋지않아 잘 쓰지 않는다.

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

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

// 위와 아래는 같은 코드
function Component(){
  return(
    <div>
      {
      	1 === 1
        ? <p> 참일 경우 보여줄 HTML </p>
        : null
      }
    </div>
  )
}

• && 연산자로 조건식과 오른쪽 jSX자료를 비교하고 있다.
• 왼쪽 조건식이 true면 오른쪽JSX가 남게되고, false면 HTML로 렌더링 하지 않는다.

4. switch / case 조건문

• redux에서 reducer 만들 때 많이 사용된다.

// ( index.js )
// reducer에서 if문
function reducer(state, action){
  if ( action.type === '증가'){
    return 증가된state
  } else if ( action.type === '감소'){
    return 감소된state
  } else {
  	return state
  }
}

// reducer에서 switch문
function reducer(state, action){
  switch( action.type ){ // switch( 검사할변수명 ) {}
    case '증가' : //  검사할변수명이 '증가'일 경우
      return 증가된state; // 일치할 경우 case : 밑의 코드를 실행해준다.
    case '감소' :
      return 감소된state;
    default : // if문의 else와 동일
      return state
  }
}

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

• 경우에 따라서 다른 HTML을 보여주고 싶을 때 ( ex) 쇼핑몰 상품설명부분의 탭을 만들 때)

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

① 자바스크립트 오브젝트자료형을 이용하여 보여주고 싶은 HTML을 다 담는다.
② 마지막 object{}뒤에 [] 대괄호를 붙여서 key값이 현재상태인 자료를 뽑겠다라는 뜻이다.
③ 위의 예시의 경우 var 현재상태가 'info'면 info항복에 저장된 <p>태그가 보여질 것 이다.

• 오브젝트를 변수로 저장해놓고 사용해도 된다.

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