React 학습 JSX

 

JSX

 - 리액트에서 사용하는 문법으로 자바스크립트에서 html문법을 사용하여 렌더링 로직과 ui 로직의 결합을 쉽고 보기좋게 표현하기 위해 만들어졌다.

- 템플릿 문법이 아닌 자바스크립트 함수나 클래스 형태로 ui로직이 결합 되어있다.

- 리액트 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.

- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환한다.

 

 

[ JSX문법 ]

 

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

(virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.)

// 이렇게 작성시 에러남
function App() {
	return (
    	<div>Hello</div>
        <div>User name!</div>
    )
 }
 
 // 정상문법
 function App() {
	return (
        <div>
            <div>Hello</div>
            <div>User name!</div>
        </div>
    )
 }

 

2. 자바스크립트 표현식

jsx안에서 자바스크립트 표현식을 사용 할 수 있다. 자바스크립트 표현식을 사용하려면 jsx코드 내부를 {}로 감싸주면 된다.

유효한 모든 자바스크립트 표현식을 넣을 수 있다.

 

*if나 for문은 자바스크립트 표현식이 아니기 때문에 jsx내부에서는 사용 할 수 없다. 그렇기 때문에 jsx문법 내에 사용하고 싶은 경우 if는 삼항 연산자, for문은 map을 사용하여 작성 할 수 있다.

 

[ if문을 리액트에서 사용하기 위한 방법 ]

 

방법 1 외부에서 사용

function App() {
	let desc = ''
    const login = 'y'
    if(login === 'y'){
    	desc = <div>회원입니다.<div>
    } else{
    	desc = <div>비회원 입니다.</div>
    }
    
    return (
    	<>
        	{desc}
        </>
    )
}

 

방법 2 내부에서 사용

function App() {
	const login = 'y'
    return (
    	<>
        	<div>
            	{login === 'y' ? (
                	<div>회원입니다.</div>
                ) : (
                	<div>비회원 입니다.</div>
                )}
             </div>
         </>
    )
}

 

방법 3 [AND 연산자 사용]

function App() {
	const login = 'y'
    return (
    	<>
        	<div>
            	{login === 'y' && <div>회워입니다</div>}
            </div>
        </>
     )
 }

 

방법 4 [ 즉시 실행함수 사용 ]

function App() {
	const login = 'y'
    return (
    	<>
        	{
            	(() => {
                	if(login === 'y'){
                        	return(<div>회원입니다.</div>)
                            } else {
                            	return(<div>비회원 입니다.</div>)
                            }
                  })()
             }
         </>
     )
}

 

 

3. JSX 스타일링

- jsx에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.

- 카멜 표기법으로 작성해야 한다 (font-size => fontSize)

function App() {
	const style = {
    	backGroundColor : 'red',
    	fontSize : '20px'
    }
    return (
    	<div style={style)>Hello!</div>
    )
}

 

4. class대신 className 사용 ( <div className = "box"></div> )

 

5. 주석은 {/* ... */}와 같은 형식으로 사용한다.