JSX란?
아래 코드를 보면 JavaScript 안에 있는 평소에 잘 보지 못하는 tag가 있다.
// 📂 App.js
function App() {
return (
<div>
<h2>Let's get started!</h2>
</div>
);
}
export default App;이것은 JSX라고 하며 JavaScript XML을 의미한다.
JSX는 React project에서만 활성화되는 특수한 비표준 구문이다.
결국 HTML 역시 XML이라고 할 수 있기 때문에 문제없이 호환된다.
React에 JSX 사용이 필수는 아니지만, 대부분의 개발자들은 JavaScript 코드 안에 interface 작업을 할 때 시각적으로 도움이 된다.
일반 .js 파일로는 이 용법을 해석할 수 없지만 뒷단에서 실행되는 JavaScript 파일로 변환되는 과정이 존재한다.
React를 실행할 때 사용하는 npm start는 작성된 .js 코드를 브라우저에게 친화적인 코드로 변화시킨다.
일반적으로 브라우저에서 지원되지 않지만 자동적으로 브라우저에서 작동하는 코드로 변환시켜준다.
JSX에 표현식 포함하기
아래 예시는 name이라는 변수를 선언한 후 중괄호로 감싸 JSX 안에 사용한 예시다.
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = <h1>2 + 2 = {2 + 2}</h1> ;
const element = <h1>Hello, {user.firstName}</h1> ;
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);JSX 표현식
컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 인식됩니다. 즉, JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}JSX Attribute
tag attribute에 따옴표(", ')를 이용해 문자열을 정의할 수 있다.
또한, 중괄호를 사용하여 attribute에 JavaScript 표현식을 삽입할 수도 있다.
const element = <a https://www.reactjs.org"> link </a>;
const element = <img src={user.avatarUrl}></img>;주의! attribute에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력하면 안된다. 따옴표(문자열 값에 사용) 또는 중괄호(표현식에 사용) 중 하나만 사용하고, 동일한 attribute에 두 가지를 동시에 사용하면 안된다.
