React 기초

JSX 문법

1. 하나의 요소로 감싼다.

// Error !!
function Hello(){
	return (
    	<div>Hello</div>
        <div>I'm SoHyun</div>
    );
}

function Hello(){
	return (
    	<div>
            <div>Hello</div>
            <div>I'm SoHyun</div>
        </div>
    );
}

// Fragment 태그로 감싸기
function Hello(){
	return (
    	<Fragment>
            <div>Hello</div>
            <div>I'm SoHyun</div>
        </Fragment>
    );
}

// Fragment 축약
function Hello(){
	return (
    	<>
            <div>Hello</div>
            <div>I'm SoHyun</div>
        </>
    );
}

2. 자바스크립트 표현식의 사용

// {} brackets로 감싸기
function Hello(){
	const name = 'SoHyun';
    return (
    	<>
            <div>Hello</div>
            <div>I'm {name}!</div>
        </>
    );
}

3. 조건부 렌더링

(1) return문 밖에서 if문 사용하기 (*return문 내에서 if문 사용 불가)

(2) && 와 || 이용하기

• && : 왼쪽 값이 참일 경우 오른쪽 값 렌더링
• || : 왼쪽 값이 거짓일 경우 오른쪽 값 렌더링

function App(){
	const num = 1;
    return (
    	<>
            {num==1 && <div>num은 1이 맞습니다.</div>}
            {num==1 || <div>num은 1이 아닙니다.</div>}
        </>
    );
}

(3) Case문 사용하기

(4) 삼항연산자

function App(){
	const num=1;
    return (
    	<>
            {
                num==1
                ? <div>num은 1이 맞습니다.</div>
                : <div>num은 1이 아닙니다.</div>
            }
        </>
    );
}