Written by Parkdev
on January 24, 2024

[React] 리엑트에서 자주쓰는 조건문 정리

리엑트에서 조건문을 통해 JSX 구성하기

리엑트를 사용하다보면 조건문을 사용해 특정조건에 요소를 보여줄지 말아야할지 정해야하는 경우가많다. 이럴때 응용 및 사용 할 수 있는 다양한 조건문을 알아보자

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

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

return () 안의 JSX 내에서는 사용 불가능하기때문에 return밖으로 써야한다.
else를 생략할 수도있다.

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

function 안에선 return을 만나면 나머지 코드는 실행되지 않기때문이다.
보다 깔끔한 코드를 만들기위해선 else를 생략하는 쪽으로 작성해보자

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

function Component() {
  return (
    <div>
      { 1 === 1 ? <p>참</p> : null }
    </div>
  )
} 

간단한 조건문을 사용할때 사용한다
중첩도 가능하다

function Component() {
  return (
    <div>
      {
        1 === 1 ? <p>참</p> :
        ( 2 === 2 ? <p>그다음 참</p> :
        <p>거짓</p> 
        )
      }
    </div>
  )
} 

그런데 이렇게 중첩하다보면 코드가 지저분해져 읽기 어려워지므로 되도록이면 지양하자.

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

자바스크립트에선 &&(and)연산자가 있다. 그리고 html를 조건부로 보여줄 때, 아래의 경우가 많다.

“만약에 이 변수가 참이면 를 이 자리에 뱉고 참이 아니면 null 뱉고”

이때 &&을 사용하면 깔끔하게 작성할 수 있는데

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

JSX에서는 왼쪽 조건식이 true면 오른쪽 JSX가 그 자리에 남기때문이다
그리고 왼쪽 조건식이 false면 false가 남아 HTML로 렌더링하지 않는다

때문에 “만약에 이 변수가 참이면 를 이 자리에 뱉고 참이 아니면 null 뱉고” 이런 상황에서 자주 쓸 수 있는 간단한 조건문이다.

4. switch / case 조건문

if문이 중첩되어있을때 가끔 쓰인다.

아래와 같이 if을 중첩해서 써야하는경우

function Component2(){
  let user = useState('seller');
  if (user === 'seller'){
    return <h4>판매자 로그인</h4>
  } else if (user === 'customer'){
    return <h4>구매자 로그인</h4>
  } else {
    return <h4>그냥 로그인</h4>
  }일단 state를 만들어놓고 if문으로 state를 검사하는 문법을 써야할 것 같지만

이번엔 if문이 아니라 
}

자바스크립트 switch 문법을 이용하면 괄호를 조금 더 줄일 수 있다.

function Component2(){
  var user = '값'
  
  switch (user){
    case 'seller' : //user가 seller이면 아래줄실행
      return <h4>판매자 로그인</h4>
    case 'customer' : //user가 customer이면 아래줄실행
      return <h4>구매자 로그인</h4>
    default : // case에 해당하는 값이없으면 실행
      return <h4>그냥 로그인</h4>
  }
}

5. object/array 자료형을 응용

array 자료형을 응용해서 쓸수도있다.

예를 들면 쇼핑몰에서 상품설명부분을 탭으로 만든다고 할때

경우에 따라서 상품정보 / 배송정보 / 환불약관 내용을 보여주어야 하는데

현재 state가 info면 상품정보

현재 state가 shipping이면 배송정보

현재 state가 refund면 환불약관

을 각각 보여주고싶을때

자바스크립트 object 자료형에 내가 보여주고 싶은 HTML을 다 담아 보여줄 수 있다.

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

    </div>
  )
} //  <p>환불약관</p>이 출력된다.

← → Top