[ React ] 리액트에서 사용되는 조건문 작성 패턴

참고 : https://codingapple.com/unit/react-if-else-patterns-enum-switch-case/?id=2305

 → 저에게 맞춰진 설명으로, 자세한 설명은 해당 사이트 참고.

---

1. 기본 조건식 (IF문)

function Component(){
  if(조건) {return Component_A}
  else if(조건2) {return Component_B}
  return Component_C
}

 

다른 언어에서 사용하는 것처럼 대체로 사용하는 조건식의 형태를 사용하고 있습니다.

다른 언어들과 같이 실행문이 한 줄일 경우, 중괄호를 제외할 수 있습니다.

---

2. 삼항연산자

function Component(){
  return (
    <div>
      {
        1 === 1 ? true일 때 출력될 값 : false일 때 출력될 값
      }
    </div>
  )
}

 

이것도 다른 언어와 마찬가지로 평범한 삼항연산자입니다.

---

3. && 연산자

function Component(){
  return (
    <div>
      {
        1 === 1 && true일 때 출력될 값
      }
    </div>
  )
}

 

그냥 삼항 연산자에서 false일 때 출력될 값을 제거한 것으로 추정함.

---

4. 기본 조건식 (SWITCH문)

function Component(){
  var a = 'seller'
  switch (a){
    case 'seller':
      return Component_seller
    case 'member':
      return Component_member
    default:
      return Component_notlogin
  }
}

 

평범한 스위치문입니다.

---

5. object / array 자료형 응용

// 그냥 박아둔 배열
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>)
}

 

그냥 딱 보면 느낌이 올 것이다.

보이는 바와 같이 때려맞추면 됨.