JSX 문법

• JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장
• JSX는 Babel에 의해서 Transcompile 됩니다.
• HTML 태그 내에 JavaScript 연산
• class -> className
• 스타일은 object로
• 닫는 태그 필수
• 최상단 element는 반드시 하나
  
  

---

 

1️⃣ 규칙

1. HTML과 달리 모든 태그는 꼭 닫혀있어야 합니다.

2. 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸져 있어야 합니다. 

import React, { Component } from 'react';

class App extends Component {
	render() {
    	return (
     	   <div>Hello</div>
      	   <div>World</div>
   	    	);
        }
    }
    
    export default App;

예를 들어 위의 코드는 엘리먼트가 두 개 이상이기 때문에 오류가 납니다.

 

import React, { Component } from 'react';

class App extends Component {
	render() {
    	return (
            <div>
               <div>Hello</div>
               <div>World</div>
            </div>
   	    	);
        }
    }
    
    export default App;

그러므로 이렇게 두 개 이상의 엘리먼트는 무조건 하나의 엘리먼트로 감싸주어야 합니다.

간단하지만 의아하고 귀찮을 수 있으므로 v16.2 부터는 Fragment를 도입하였습니다.

 

<Fragment> 를 사용해볼까요?

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	return (
            <Fragment>
               <div>Hello</div>
               <div>World</div>
            </Fragment>
   	    	);
        }
    }
    
    export default App;

이렇게 써주면 오류도 안나고, 콘솔창에 불필요한 div도 나타나지 않습니다.

 

또한, Fragment는 간단히 <>로 표기가 가능합니다.

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	return (
            <> 
               <div>Hello</div>
               <div>World</div>
            </>
   	    	);
        }
    }
    
    export default App;

 

---

 

2️⃣ JSX 안에 자바스크립트 값 사용하기

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	return (
        	<div>
            	hello {name}
                </div>
   	    );
        }
    }
    
    export default App;

리턴문 안에 {name} 을 작성해준 후

 

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	const name = 'react';    // 추가
        
    	return (
        	<div>
            	hello {name}
                </div>
   	    );
        }
    }
    
    export default App;

const name = 'react'; 를 추가해줘서 name값을 알려주면 됩니다.

 

 

⭐ var    /    const    /    let

var : ES6에서는 더 이상 쓰이지 않음
const : 한번 선언 후 고정적인 값
let : 유동적인 값

 

 

---

 

 

3️⃣ 조건부 렌더링

JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나 AND 연산자를 사용합니다.

반면, IF문은 사용할 수 없습니다.

 

삼항 연산자 예시를 보겠습니다.

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	const name = 'react';   
        
    	return (
        	<div>
              	  {
                	1 + 1 === 3
                    	? '맞다'
                        : '틀리다'
            	   }
                </div>
   	    );
        }
    }
    
    export default App;

 

 

AND 연산자 예시를 보겠습니다.

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	const name = 'react';   
        
    	return (
        	<div>
              	  {
                	name === 'react' && <div>리액트</div>
            	   }
                </div>
   	    );
        }
    }
    
    export default App;

name값이 react일 경우 리액트를 렌더링 해주고

react가 아니라면 아무것도 뜨지 않게 됩니다.

 

조건이 여러 개인 경우엔 보통 JSX 바깥에서 하는 게 일반적이긴 하지만, JSX 내부에서 함수를 선언하고 바로 실행하는 방식으로 구현 가능합니다.

예시를 보겠습니다.

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	const value = 1;   
        
    	return (
        	<div>
              	 {  {/* 함수 선언 */}
                 	function() {
                    	if (value === 1) return <div>1이다!</div>
                        if (value === 2) return <div>2다!</div>
                        if (value === 3) return <div>3이다!</div>
                        return <div>없다</div>
                        }
                 }
                </div>
   	    );
        }
    }
    
    export default App;

이렇게 먼저 함수 선언을 해주고 난 후

 

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	const value = 1;   
        
    	return (
        	<div>
              	 {  {/* 함수 선언 */}
                 	(function() {
                    	if (value === 1) return <div>1이다!</div>
                        if (value === 2) return <div>2다!</div>
                        if (value === 3) return <div>3이다!</div>
                        return <div>없다</div>
                        }) ()   {/* 바로 호출 */}
                 }
                </div>
   	    );
        }
    }
    
    export default App;

소괄호로 함수를 감싼 후, 바로 ()를 통해 호출하면 됩니다.

 

이것을 간단하게 화살표 함수로 다시 표현해볼까요?

import React, { Component, Fragment } from 'react';

class App extends Component {
	render() {
    	const value = 1;   
        
    	return (
        	<div>
              	 {    {/* 화살표 함수로 함수 선언 */}
                 	( () => {
                    	if (value === 1) return <div>1이다!</div>
                        if (value === 2) return <div>2다!</div>
                        if (value === 3) return <div>3이다!</div>
                        return <div>없다</div>
                        }) ()     {/* 바로 호출 */}
                 }
                </div>
   	    );
        }
    }
    
    export default App;

 

 

 

---

 

 

 

4️⃣ CSS 적용

1. 스타일을 객체 { } 안에 작성한다.

2. 카멜표기법으로 작성한다.

https://www.w3schools.com/react/react_css.asp 

ex) font-size => fontSize,   padding-left => paddingLeft

3. 적용할 때에도 {style} 이라고 적는다.

4. css클래스를 따로 사용할 경우 class가 아닌 className을 사용한다.

import React, { Component } from 'react';

class App extends Component {
	render() {
    	const style = {
            backgroundColor: 'black',
            padding: '15px',
            color: 'white',
            fontSize: 20px
            };
            
        return (
          <div style = {style}>
            	안녕하세요!
          </div>
           );
         }
       }
       
export default App;

 

 

---

 

 

5️⃣ 주석

{ /* 주석 처리하기 */  } 으로 감싸주어야 합니다.

import React, { Component } from 'react';

class App extends Component {
	render() {     
        return (
          <div>
            	{/* 안녕하세요! 주석처리하기 */}
          </div>
           );
         }
       }
       
export default App;