Written by
Nostrss
on
on
[React] JSX란 무엇인가
JSX란?
- 자바스크립트를 확장한 문법이다
JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.- 자바스크립트의 공식적이 문법은 아니다.
JSX는 리액트에서 엘리먼트를 생성하는데 아래에 참고 코드를 작성해두었다.
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez',
};
const element = <h1>Hello, {formatName(user)}!</h1>;
//중괄호 안에 자바스크립트 표현식을 넣을 수 있다.
위의 코드를 보면 h1 엘레멘트를 생성하고 있으며 자바스크립트와 HTML을 동시에 작성하는 모습을 확인할 수 있다.
그런데 작성할때 몇가지 주의 할 사항이 있어서 정리해보았다.
사용자 정의 컴포넌트는 반드시 대문자로 시작
<div>,<span>과 같은 내장 컴포넌트 말고 사용자가 직접 정의하는 컴포넌트의 경우에는 대문자로 시작하는 것을 추천하고 있다.
import React from 'react';
// 올바른 사용법입니다. 아래는 컴포넌트이므로 대문자로 시작해야 합니다.
function Hello(props) {
// 올바른 사용법입니다! 아래의 <div> 사용법은 유효한 HTML 태그이기 때문에 유효합니다.
return <div>Hello {props.toWhat}</div>;
}
function HelloWorld() {
// 올바른 사용법입니다! React는 <Hello />가 대문자로 시작하기 때문에 컴포넌트로 인식합니다.
return <Hello toWhat="World" />;
}
그외에도 많은 사용법이 있는데, 하나씩 공부하면서 정리를 해봐야겠다. 할게 너무나도 많다 ..