[React] 리액트에서 자주 쓰는 if 문 작성패턴 5개

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

컴포넌트에서 JSX를 조건부로 보여주고 싶으면 이렇게 씀.

왜냐하면 자바스크립트 if문은 return () 안의 JSX 내에서는 사용이 불가능하기 때문에.

(<div> if(어쩌구){저쩌구} </div> 이게 안된다는 의미)

그래서 보통 return + JSX 전체를 뱉는 if문을 작성해서 사용.

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

참고) 이렇게 쓰는 경우 else 생략 가능

else와 중괄호를 하나 없애도 아까 코드와 똑같은 기능을 함.

왜냐하면 자바스크립트 function 안에서 return 이라는 키워드를 만나면 return 밑에 있는 코드는 더이상 실행되지 않기 때문에.

if -> else if -> else 로 구성된 조건문도 if 두개로 축약가능 (if, if, return)

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

 

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

조건문 ? 조건문 참일떄 실행할 코드 : 거짓일 때 실행할 코드

에 맞춰 쓰면 됨.

JSX 내에서 if/else 대신 쓸 수 있다는 장점.

삼항연산자는 그냥 if와 다르게 JSX 안에서도 실행가능하며 조건을 간단히 주고 싶을 때 사용.

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

삼항연산자는 중청 사용도 가능.

하지만, 나중에 읽었을 때나 남이 보기에 좋은 코드는 아님.

그냥 return 문 바깥에서 if else 다음 그 결과를 변수로 저장하고 변수를 집어넣는게 더 나음.

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : ( 2 === 2 
            ? <p>안녕</p> 
            : <p>반갑</p> 
          )
      }
    </div>
  )
}

 

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

(문법) 자바스크립트에선 &&연산자

 

"그냥 왼쪽 오른쪽 둘다 true면 전체를 true로 바꿔주세요~" 라고 쓰고싶을 때 사용

true && false;
true && true;

맨 위의 코드는 그 자리에 false가 남고

밑의 코드는 true가 남음

 

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

true && '안녕';
false && '안녕';
true && false && '안녕';

맨 윗 코드는 '안녕'이 남고

중간 코드는 false가 남고

맨 아래 코드는 false가 남음

 

 

왜냐면 && 연산자를 잘 생각해보면 이해도 가능한데 이해를 하기 싫으면 

"자바스크립트는 그냥 &&로 연결된 값들 중에 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막값을 남겨준다"

이런 이상한 현상이 있다고 외우면 됨

 

이걸 리액트에서 약간 악용하면 if문을 조금 더 간략하게 쓸 수 있음

html 조건부로 보여줄 때 많이 사용.

"만약 이 변수가 참이면 <p></p> 를 이 자리에 넣고, 참이 아니면 null을 넣고"

UI 만들 때 이런거 자주 쓰는데, && 연산자를 사용하면 축약 가능.

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가 남음.

(false가 남으면 HTML로 렌더링하지 않음.)

 

4. switch / case 조건문

if문이 중첩해서 여러개 달려있는 경우에 가끔 사용

// if문이 연달아 여러개인 경우
function Component2(){
  var user = 'seller';
  if (user === 'seller'){
    return <h4>판매자 로그인</h4>
  } else if (user === 'customer'){
    return <h4>구매자 로그인</h4>
  } else {
    return <h4>그냥 로그인</h4>
  }
}

// switch를 사용하여 괄호를 줄인 경우
function Component2(){
  var user = 'seller';
  switch (user){
    case 'seller' :
      return <h4>판매자 로그인</h4>
    case 'customer' :
      return <h4>구매자 로그인</h4>
    default : 
      return <h4>그냥 로그인</h4>
  }
}

1. switch(검사할변수){} 작성하고

2. 그 안에 case 검사할변수가이거랑일치하는지 : 를 넣어줌

3. 그래서 이게 일치하면 case : 밑에 있는 코드를 실행.

4. default : 는 그냥 맨 마지막에 쓰는 else문과 동일함.

 

5. object / array 자료형 응용

"경우에 따라서 다른 html 태그들을 보여주고 싶은 경우"

 

예를 들어 탭을 만든다면,

현재 state가 info면 <p>상품정보</p>

현재 state가 shipping이면 <p>배송정보</p>

현재 state가 refund면 <p>환불약관</p>

처럼 보여주는거.

 

state를 만들어놓고 if문으로 state를 검사하는 문법을 써야할 것 같지만

if문이 아니라 자바스크립트 object 자료형에 보여주고 싶은 HTML을 모두 담기.

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

    </div>
  )
}

JSX 상에서 html 태그들은 object에 담든, array에 담든 상관 없음.

object 자료형으로 HTML을 다 정리해서 담은 다음,

object{} 뒤에 [ ] 대괄호붙여서 "key값이 현재상태인 자료를 뽑겠습니다"라고 쓰기.

 

그러면 이제 현재상태라는 변수의 값에 까라서 원하는 HTML을 보여줄 수 있음.

만약에 var 현재상태가 'info'면 info 항목에 저장된 <p>태그가 보여질 거고

만약에 var 현재상태가 'refund'면 refund 항목에 저장된 <p>태그가 보여질 것.

 

var 말고도 state를 만들어도 되고,

변수로 저장해서 써도 됨

var 탭UI = { 
  info : <p>상품정보</p>,
  shipping : <p>배송관련</p>,
  refund : <p>환불약관</p>
}

function Component() {
  var 현재상태 = 'info';
  return (
    <div>
      {
        탭UI[현재상태]
      }
    </div>
  )
}

---

출처: 코딩애플

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!