[ React ] JSX

JSX 

Javscript를 확장한 문법으로, JS의 모든 기능이 포함되어 있다. 

JSX는 React element를 생성한다. 

React에서 HTML을 표현할 때 JSX를 사용하는데 겉으로 보기에는 HTML을 입력하는 것 처럼 보이지만, Build 시 Babel( Javascript Compiler ) 에 의해서 JS로 변환된다. 

 

※ React에서 JSX를 사용하는 것은 필수가 아니지만 대부분 사용한다. ( 1. UI관련 작업 시 시각적으로 도움이 됨. 2. Error 및 경고 메시지 표시 더 잘 뜸. ) 

 

JSX 표현식

1. 중괄호 내에는 모든 유효한 JS 표현식 사용가능.

    (1) 변수 

const nmae = "Kite z";
const element = <h1>Hello, {name}</h1>

ReactDOM.render(
	// ReactDOM.render : React component를 Web browser에 redering하는 API
	element,
    document.getElementById('root')
);

    

    (2) 함수 호출 결과

function formatName(user){
	return user.firstName + ' ' + user.lastName;
}

const user = {
	firstName : "Kite",
    lastName : "z"
};

const elemnet = (
	<h1>
    	Hello, {formatName(user)}!
    </h1>
);

ReactDOM.render(
	element, 
    document.getElementById('root')
);

 

2. JSX attribute 정의

    (1) 따옴표 사용

const element = <div Index = "0"></div>;

    (2) 중괄호 사용 

const element = <img src = { user.avatarUrl }></img>;

두가지 표현식 중 하나만 사용해야 하며, 동시 사용 X

 

 

출처 : https://ko.reactjs.org/docs/introducing-jsx.html