[코딩애플] 쇼핑몰 프로젝트 Part7 - 리액트에서 자주 쓰는 if문 작성 패턴

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

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

// 또는, 아래와 같이 쓰면 else 생략 가능
function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } 
  return null;
}

- 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>안녕</p> 
            : <p>반갑</p> 
          )
      }
    </div>
  )
}

- if와는 다르게 JSX 안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용

 

3️⃣ && 연산자로 if 역할 대신하기
! 자바 스크립트의 && 연산자란 왼쪽 오른쪽 둘다 true이면 전체를 true로 바꿔주는 연산자이다.

true && false;  // 결과: false
true && true;  // 결과: true

- 근데 자바스크립ㅂ트는 && 기호로 비교할 때 true와 false를 넣는게 아니라 자료형을 넣으면

true && '안녕';  // 결과: '안녕'
false && '안녕';  // 결과: false
true && false && '안녕';  // 결과: false

- 왜냐면 자바스크립트는 &&로 연결된 값들 중에 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막값을 남겨주기 때문

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

// 위와 같은 역할

function Component() {
  return (
    <div>
      { 1 === 1 && <p>참이면 보여줄 HTML</p> }  <!-- 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남고 왼쪽 조건식이 false이면 false가 남는다. false가 남으면 HTML로 렌더링하지 않는다 -->
    </div>
  )
}

 

4️⃣ switch / case 조건문

function Component2(){
  var user = 'seller';
  if (user === 'seller'){
    return <h4>판매자 로그인</h4>
  } else if (user === 'customer'){
    return <h4>구매자 로그인</h4>
  } else {
    return <h4>그냥 로그인</h4>
  }
}

// 위와 같이 if문이 중첩해서 여러개 달려있는 경우 switch 문법 사용

function Component2(){
  var user = 'seller';
  switch (user){  // switch(검사할변수){}
    case 'seller' :  // case 검사할변수가이거랑일치하냐: 를 넣어줌
      return <h4>판매자 로그인</h4>  // 일치하면 실행
    case 'customer' :
      return <h4>구매자 로그인</h4>
    default :  // else문과 동일
      return <h4>그냥 로그인</h4>
  }
}

- 장점: if문 연달아쓸 때 코드가 약간 줄어들 수 있다.
- 단점: 조건식란에 변수 하나만 검사할 수 있다

 

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>
  )
}

- 경우에 따라서 다른 html 태그들을 보여주고 싶은 경우에 사용
- if문이 아니라 자바스크립트 object 자료형에 내가 보여주고 싶은 HTML을 다 담는다.
- 마지막에 object{} 뒤에 [] 대괄호를 붙여서 "key값이 현재상태인 자료를 뽑겠습니다" 라고 써놓는다

- 그럼 이제 현재상태라는 변수의 값에 따라서 원하는 HTML을 보여줄 수 있다.
- 만약에 var 현재상태가 'info'면 info 항목에 저장된 <p>태그가 보여질 것이고
- 만약에 var 현재상태가 'refund'면 refund 항목에 저장된 <p>태그가 보여진다.

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.