React에서 자주 쓰는 if문 작성패턴 5가지

 

1. component 안에서 쓰는 if else

component에서 JSX를 조건부로 보여주고 싶으면 이렇게 쓴다.

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

 

2. JSX안에서 쓰는 3항 연산자

ternary operator

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

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

 

3항 연산자는 중첩 사용도 가능하다.

단점. 가독성이 나쁘다.

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

 

3. && 연산자

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

// javascript 문법
true && '안녕';			// '안녕'
false && '안녕'; 			// false
true && false && '안녕';	// false

 

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

// 위 3항 연산자를 아래처럼 사용할 수 있다.
function Component(){
    return (
        <div>
        	{ 1 === 1 && <div>참이면 보여줄 HTML</div> }
        </div>
    )
}

왼쪽 조건이 false면 false를 반환하는데, false는 HTML로 렌더링하지 않는다.

 

 

4. switch / case 문

if문을 중첩해서 사용해야 할 경우 switch / case문을 사용하면 괄호 양을 조금 더 줄일 수 있다.

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

 

5. Object / Array 자료형 응용

경우에 따라서 다른 HTML을 보여주고 싶은 경우에 사용한다.

JSX 상에서 html 태그들은 Object에 담든, Array에 담든 아무 상관이 없다.

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

변수에 담아 더 간단하게 사용할 수도 있다.

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

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

 

 

6.  ?. 옵셔널 체이닝 연산자

optional chaining ?. 을 사용하면 객체에 에러 없이 안전하게 접근할 수 있다.

?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고, null이나 undefined가 아니라면 평가를 계속한다.

let user = {};

console.log( user?.address?.street );	// undefined, 에러가 발생하지 않는다.