!해당 포스트는 처음 만난 리액트(React) - 소플 강의를 수강하면서 정리한 내용임.
JSX
JSX - a syntax extension to JavaScript(자바스크립트 확장 문법)
- JavaScrip + XML/HTML
JSX 코드 예시
const element = <h1>hello, world!</h1>;
JSX의 역할
createElement - JSX 코드를 자바스크립트로 변환해주는 리액트 함수
JSX를 사용한 코드
const element = (
<h1 className="greeting">
Hello, world!
</h1>
)
JSX를 사용하지 않은 코드
const element = React.createElement(
'h1',
{ className: 'greeting'},
'Hello, world!'
)
위 두 코드는 같은 의미임.
React.createElement()의 결과로 아래와 같은 객체가 생성됨
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
}
리액트에서 JSX를 쓰는게 필수는 아니지만 편리함.
JSX의 장점
- 간결한 코드
- 가독성이 좋음
- 버그를 발견하기 쉬움
- Injection Attacks 방어
JSX사용법
- XML/HTML 사이에 JS를 쓰고 싶은 경우 {} 중괄호를 사용
- XML/HTML {JavaScript 코드} … XML/HTML
태그의 속성에 값을 넣는 방법
// 큰따옴표 사이에 문자열을 넣거나
const element = <div tabIndex="0"></div>;
// 중괄호 사이에 자바스크립트 코드를 넣으면 됨!
const element = <img src={user.avaarUrl}</img>;
자식을 정의하는 법
const element = (
<div>
<h1>안녕하세요</h1>
<h2>리액트 공부</h2>
</div>
);
<div> 태그 안에 <h1>과 <h2> 태그
'Develop > FE' 카테고리의 다른 글
| [React] Handling Events & Conditional rendering (1) | 2024.10.03 |
|---|---|
| [React] Hooks (0) | 2024.09.27 |
| [React] State and Lifecycle (1) | 2024.09.19 |
| [React] Components와 Props (1) | 2024.09.09 |
| [React] Rendering elements (2) | 2024.09.08 |