JSX 규칙

*return의 '()'와 같은 괄호는 없어도 됩니다.

태그는 꼭 닫혀 있어야 합니다. (태그 사이에 아무 내용이 안들어가는 경우 셀프클로징 태그 사용)

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

function App() {
    return (
    	<input />
    );
}

두개 이상의 태그는 하나의 태그로 감싸져야 됩니다.

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

function App() {
    return (
    	<>
            <input />
            <br />
        </>
    );
} // 프래그먼트 사용

자바스크립트 값을 사용하기 위해서는 '{}'를 사용합니다.

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

스타일을 지정해주려면 스타일 객체를 따로 만들어주어야 합니다. 카멜케이스로 스타일을 작성해주어야 하며, 수치의 기본 단위는 'px'입니다.

사실 객체를 따로 안만들고 인라인 부분에 바로 style을 작성할 수 있지만, style 객체가 계속 새로 생기는 것이기 때문에 새로 렌더링이 되기 때문에 성능을 떨어트립니다.

function App() {
    const name = 'react';
    const style = {
    	backgroundColor: 'black',
        fonstSize: 24, // 기본값은 'px'
        padding: '1rem'
    }
    
    return (
    	<div>
            <input />
            <div style={style}>{name}</div>
        </div>
    );
}

클래스로 스타일 지정하기 위해서는 css 파일에 클래스 스타일을 적고, App.js에  해당 css 파일을 import 해주는 방법을 사용해야 합니다. class명을 적을 때는 'className'으로 써야합니다.

-App.css

.gray-box {
 	background: gray;
 	width: 64px;
 	height: 64px;
}

 

-App.js

import './App.css';


function App() {    
    return (
    	<div>
            <input />
            <div className="gray-box"></div>            
        </div>
    );
}

주석은 '{/* */}'으로 써준다. 혹은 셀프클로징태그 안에 '//'를 쓰면서 주석을 달 수 있습니다.

import './App.css';


function App() {    
    return (
    	<div>
            <input
            	// 주석
            />
            <div className="gray-box"></div>
            {/* 주석 */}
        </div>
    );
}