[React] React에서 자주 사용하는 if문 작성패턴 5개

1. Component 안에서 쓰는 if-else문

function Component() {
    if(true) {
    	return <p>true일 때 보이는 HTML</p>;
    } else {
    	return null;
    }
}

 

 

💡 위 코드처럼 쓰려면 else 생략이 가능합니다.

 

function Component() {
    if(true) {
    	return <p>true일 때 보이는 HTML</p>;
    }
    return null;
}​

: JavaScript function 안에선 return 이라는 키워드를 만나면 return 밑에 있는 코드는 더 이상 실행되지 않습니다.

---

2. JSX 안에서 사용하는 삼항연산자

삼항연산자(ternary operator) 형식
조건문 ? 조건문 참일 때 실행할 코드 : 조건문 거짓일 때 실행할 코드

function Component() {
   return (
    	<div>
        	{
            	1 === 1
                ? <p>참일 때 보여줄 HTML</p>
                : <p>거짓일 때 보여줄 HTML</p>
            }
        </div>
    )
}

: if-else문 대신 사용할 수 있는게 장점이며, 삼항연산자는 그냥 if와는 다르게 JSX 안에서도 실행 가능하며 조건을 간단히 주고 싶을 때 사용합니다.

 

 

💡 삼항연산자는 중첩 사용도 가능합니다.

function Component() {
   return (
    	<div>
        	{
            	1 === 1
                ? <p>참일 때 보여줄 HTML</p>
                : ( 2 === 2
                    ? <p>1</p>
                    : <p>2</p>
                  )
            }
        </div>
    )
}

: else문 안에 if-else문을 하나 추가하였습니다. 하지만 가독성이 떨어지는 코드라 추천드리진 않습니다. return문 바깥에서 if-else문 쓰시고 그 결과를 변수로 저장하여 <div> 안에서 삼항연산자를 사용하는 것이 좋을 것 같습니다.

---

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

- 우선 && 연산자에 대해 알아보겠습니다.

true && false;	// false
true && true;	// true

: 왼쪽 오른쪽 둘 다 true이면 true값이 나오고, 하나라도 false면 false값이 나옵니다.

 

 

- && 연산자로 비교할 때 true와 false가 아닌 자료형을 넣어보겠습니다.

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

: && 기호를 중첩해서 여러개 쓰면 && 사이에서 처음 등장하는 falsy값을 찾아주고 그게 아니면 마지막 값을 남겨줍니다.

---

- if문 사용할 때

  "만약 이 변수가 참이면 HTML을 출력하고, 거짓이면 null을 뱉어라"

  라는 패턴의 if문을 쓰는 경우가 많습니다.

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

 

 

- 위 코드를 아래 코드처럼 && 연산자를 사용하여 코드를 축약할 수 있습니다.

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

: 조건문이 true이면 오른쪽에 적어둔 JSX문이 그 자리에 남지만, 조건문이 false이면 false가 남습니다. (false가 남으면 HTML로 렌더링하지 않습니다.)

---

4. switch-case 조건문

- 우선 이전에 redux에서 reducer 만들 때 사용했던 if-else문을 보겠습니다.

function reducer(state, action) {
    if(action.type === '수량증가') {
    	return 수량증가된state
    } else if(action.type === '수량감소') {
    	return 수량감소된state
    } else {
    	return state
    }
}

 

 

- 위 코드처럼 if-else문으로 연달아 사용한 것을 switch 문법을 이용하면 아래 코드처럼 작성할 수 있습니다.

function reducer(state, action) {
    switch (action.type) {
    	case '수량증가' :
        	return 수량증가된state;
        case '수량감소' :
        	return 수량감소된state;
        default :
        	return state
    }
}

: if-else문을 연달아서 쓸 때보다 코드가 약간 줄어들고, 코드 가독성도 좋아집니다.

---

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

예를 들어, 쇼핑몰 페이지에서 상품 설명 부분을 Tab으로 만든다고 하고,

경우에 따라서 상품정보 / 배송정보 / 환불약관 내용을 보여주고 싶다고 합시다.

 

 

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

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

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

 

 

위 내용을 보여주고자 한다면,

state를 만들어놓고 if문으로 state를 검사하는 문법을 사용할 수도 있습니다.

하지만 이번엔 if문이 아니라 JavaScript Object 자료형에 내가 보여주고 싶은 HTML을 다 담아보겠습니다.

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

- 원래 JSX는 Object에 담든, Array에 담든 아무 상관이 없습니다.

- Object 자료형으로 HTML을 다 정리해서 담은 다음, 마지막 Object{} 뒤에 [] 대괄호를 붙여서

  "key값이 현재상태인 자료를 뽑겠습니다" 라고 작성한 것입니다.

- 그럼 '현재상태' 라는 변수값에 따라 원하는 HTML을 보여줄 수 있는겁니다.

  * 만약 let 현재상태가 'info'면 <p>상품정보</p>가 보여질 것이고,

    let 현재상태가 'refund'면 <p>환불약관</p>가 보여질 것입니다.

 

 

💡 혹은 Object를 변수로 저장해놓고 사용하셔도 됩니다.

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

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