리액트 JSX 기초
JSX는 Javascript XML(eXtensible Markup Language)의 약자이다.
1. 태그를 반드시 닫아야 함
아래처럼 태그를 닫지 않으며 오류가 발생한다.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
<div>
</div>
);
}
export default App;
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
<div>
</div>
);
}
export default App;
2. input이나 br 태그도 꼭 닫아야 함
input이나 bt처럼 닫힘 태그가 없어도 되는 태그를 Void element라고 한다.
기존 HTML에서는 input, br처럼 태그를 닫지 않아도 상관없지만 JSX는 꼭 닫아야 한다.
아래처럼 Self closing 형태로 열린 태그에서 닫아주면 된다.
Self closing은 슬래시를 붙여 스스로 닫는 형태를 의미하고, [자체 닫힘 태그]라고 번역하면 된다.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
<input />
<br />
</div>
);
}
export default App;
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
<input />
<br />
</div>
);
}
export default App;
3. 두 개 이상의 태그는 하나로 감싸야 함
아래처럼 두 개 이상의 태그가 상위 태그로 감싸져 있지 않으면 오류 발생한다.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<Hello />
<div>안녕하세요2</div>
);
}
export default App;
import Hello from './Hello';
function App() {
return (
<Hello />
<div>안녕하세요2</div>
);
}
export default App;
이럴때는 div 태그로 감싸거나, 태그가 표시되지 않고 아예 없는 것처럼 처리하고 싶다면 Fragment라는 것으로 감싸면 된다.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<>
<Hello />
<div>안녕하세요2</div>
</>
);
}
export default App;
import Hello from './Hello';
function App() {
return (
<>
<Hello />
<div>안녕하세요2</div>
</>
);
}
export default App;
Fragment는 브라우저 상에서 엘리먼트로 나타나지 않는다.