1. JSX란?
JSX = JavaScript + XML/HTML
- A syntax extension to JavaScript (자바스크립트의 확장 문법)
- 대입 연산자를 통해 Html 코드를 변수에 저장한다.
const element = <h1>Hello, world!</h1>;
2. JSX의 역할
- JSX로 작성된 코드는 모두 자바스크립트 코드로 변환
- JSX는 React.createElement()로 변환된다.
// JSX
<div id="foo">Hello</div>
=>
// React.createElement()
React.createElement('div', { id: 'foo' }, 'Hello');
3. JSX의 장점
- 코드가 간결해진다.
- 가독성이 향상된다.
// jsx 사용
<div>Hello, {name}</div>;
// jsx 사용 안함
React.reactElement('div', null, `Hello, ${name}`);
4. JSX의 사용법
- 큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0"></div>;
- 중괄호 사이에 자바스크립트 코드를 넣거나
const element = <img src={{user.imgUrl}} />
const element = (
<div>
<h1>리액트인가? 리엑트인가??</h1>
</div>
);
5. 예제
// Cat.jsx
import React from 'react'; // JSX를 사용하기 위해 반드시 import 해야 함
const Cat = (props) => {
// JSX를 사용하지 않는 경우, createElement() 함수의 두 번째 파라미터로 자바스크립트 객체를 넣어주면 됨
return (
// return 문 안에 HTML 태그를 작성하면 됨
<div>
나의 고양이 이름은 {props.name}이고 {props.age}살 입니다.
</div>
// 중괄호를 사용하면 자바스크립트 코드가 들어간다.
);
};
export default Cat; // export default 문을 사용해 다른 파일에서 Cat 컴포넌트를 불러올 수 있게 함
// App.jsx
import './App.css'; // CSS 파일을 불러올 수 있음
import Cat from './components/Cat'; // 다른 파일에서 Cat 컴포넌트를 불러옴
function App() {
// App 컴포넌트
return (
<>
<Cat name="겨울" age="2" />
<Cat name="가을" age="5" />
</>
// Cat 컴포넌트를 사용할 때 props.name, props.age를 넣어줌
// 나의 고양이 이름은 겨울이고 2살 입니다.
// 나의 고양이 이름은 가을이고 5살 입니다.
);
}
export default App;
'Front > React' 카테고리의 다른 글
컴포넌트(Components) - React 배우기 (0) | 2023.10.08 |
---|---|
엘리먼트(Element) - React 배우기 (0) | 2023.10.07 |
react app 설치, react 필수 라이브러리, Netlify 배포 - React 배우기 (0) | 2023.10.07 |
React란 무엇인가? - React 배우기 (1) | 2023.10.07 |
2. 작업환경 준비 (0) | 2021.05.19 |