[React] 리액트 시작하기(3) - JSX란

* JSX란?

: JavaScript XML로 javaScript에 XML을 추가 확장한 문법.

  공식적인 자바스크립트 문법은 아님.

  JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리.

 

1. JSX의 문법

1.1 반드시 부모 요소 하나가 감싸는 형태여야 한다.

 

! ERROR CASE !

function App(){
	return(
    	<div>Hello</div>
    );
}

! 정상 코드 ! ( <div> )

function App(){
	return(
            <div>
                <div>Hello</div>
            </div>
    );
}

! 정상 코드 ! (<Fragment>)

function App(){
	return(
            <Fragment>
                <div>Hello</div>
            </Fragment>
    );
}

! 정상 코드 ! (<>)

function App(){
	return(
            <>
                <div>Hello</div>
            </>
    );
}

 

1.2 자바스크립트 표현식

: 자바스크립트 표현식을 작성하려면 JSX 내부에서 {}로 코드를 감싸주면 된다.

function App(){
	const name = 'talkingPotato';
	return(
            <>
                <div>Hello</div>
                <div>{name}</div>
            </>
    );
}

1.3 if문, for문 대신 삼항연산자

:  if, for문은 자바스크립트 표현식이 아니기에 JSX 내부에서 표현 불가

   JSX 주변 코드에서 사용하거나 {}안에서 삼항연산자 사용

//JSX 외부에서 사용
function App(){
	let text = '';
	const admin = 'talkingPotato';
    if(admin === 'talkingPotato'){
    	text = <div>관리자 입니다.</div>;
      }else{
      	text = <div>관리자가 아닙니다.</div>;
      }
	return(
            <>
                <div>{text}</div>
            </>
    );
}


//JSX 내부에서 사용
function App(){
	const admin = 'talkingPotato';

	return(
            <>
                <div>
                {
                admin === 'talkingPotato' ? ( <div>관리자 입니다.</div>) : (<div>관리자가 아닙니다.</div>)
                }
                </div>
            </>
    );
}

 

1.4 camelCase 사용

:  카멜 표기법으로 작성해아한다

function App(){
	const style = {
            fontSize:'15px',
            backgroundColor = 'blue'
    }
	return(
            <>
            	//css style
                <div style={style}>Hello</div>
            </>
    );
}

1.5 주석

: 문단 주석 /*  */ 

: 한줄 주석 //