JSX란?
리액트의 컴포넌트를 작성할 때 함수 혹은 클래스 내에서 HTML과 같은 마크업 언어를 사용하는것을 볼 수 있다.
이것을 JSX라고 한다.
처음 React가 나왔을때는 JSX가 없어 React.createElement('h1, {}, 'Hello')이런식으로 작성해야 했던 반면에
function App() {
return <h1>Hello</h1>
}위와 같은 자바스크립트내에서 HTML코드를 사용할 수 있게 지원하게 되었다.
HTML과 JSX의 차이점
HTML에서 사용하는 class속성이라던가 이벤트를 주는 onclick같은 메서들의 사용방법이 다르다.
JSX에서는 class를 className, 이벤트 핳당을 onClick으로 작성해야한다.
HTML은 마크업 언어지만 JSX문법은 엄밀히 따지자면 자바스크립트 문법이다.
그리고 JSX는 태그내에서 비즈니스 로직을 작성할 수 있는 큰 장점이있다. 이런 로직을 작성하고 싶다면 { }을 이용하여 작성할 수 있다.
또한 JSX에서는 리턴되는 태그를 형제노드로 리턴할 수 없다.
이것은 아래 예제로 보자.
function App() {
const name = 'quakka';
return (
<h1>Hello, {name}!</h1>
<span>Welcome to hell...</span>
);
};위처럼 h1과 span을 형제노드로 최상위에 만들고 리턴이 불가능하다.
아래처럼 하나로 묶어줘야 한다.
// [1]
return (
<div>
<h1>Hello, {name}!</h1>
<span>Welcome to hell...</span>
</div>
);
// [2]
return (
<>
<h1>Hello, {name}!</h1>
<span>Welcome to hell...</span>
</>
);
//[3] fragment는 import가 따로 필요함
return (
<fragment>
<h1>Hello, {name}!</h1>
<span>Welcome to hell...</span>
</fragment>
);또한 return 또는 render 내에서 반복하여 렌더링을 하고싶을때는 map같은 함수로 요소들을 렌더하여 보여줄 수 있다.
const names = ['a', 'b', 'c', 'd'];
function App() {
return (
<ul>
{ name.map((name) => <li>{name}</li>)}
</ul>
)
}
Web Developer