[ React ] JSX에서 if문 사용하기

JSX에서 if문 사용하기

 

AND 연산자를 통한 처리

AND 연산자는 조건문이 true일때 동작하는 조건문입니다.

const Test2 = () => {

    const test = 1;
    // AND 연산자
    return (
        <div>
            {
                test === 1 && <div>AND연산자입니다.</div>
            }
        </div>
    );
};


export default Test2;

 

3항 연산자를 통한 처리

3항 연산자는 조건문이 true일때 좌측, false일때 우측에 있는 내용을 렌더링합니다.

()를 사용하면 줄바꿈을 사용할 수 있습니다.

const Test2 = () => {

    const test = 1;
    // 3항 연산자
    return (
        <div>
            {
                test === 1 ? <div>3항 연산자입니다.</div> : null
            }
            
            {
                test === 1 ? (
                    <div>3항 연산자입니다.</div>
                ) : null
            }
        </div>
    );
};


export default Test2;

 

if문을 통한 처리

함수를 정의하자마자 바로 호출하는 '즉시 실행 함수'를 통해 if문을 사용할 수 있습니다.

const Test2 = () => {

    const test = 1;
    // IF 문
    return (
        <div>
            {
                (function() {
                    if (test === 1) return (<div>IF 조건문입니다.</div>)
                    else if (test === 2) return (<div>IF 조건문입니다2.</div>)
                })()
            }
        </div>
    );
};


export default Test2;

 

화살표함수 버전

const Test2 = () => {

    const test = 1;
    // IF 문
    return (
        <div>
            {
                (() => {
                    if (test === 1) return (<div>화살표함수버전</div>)
                })()
            }
        </div>
    );
};


export default Test2;

 

 

 

:: 즉시 실행 함수의 형태

(function() {
    contents
})()