728x90
반응형
JSX란?
- React는 모든 것을 View로 본다. 그렇기 때문에 기존의 자바스크립트의 라이브러리와 프레임워크와 다르게 모든 HTML 코드를 자바스크립트 코드 안에 넣는 획기적인 방법이다.
- 그 기본이 되는 것이 Javascript를 확장하여 마치 XML 문법처럼 만든 것이 JSX다.
JSX코드는 HTML과 매우 유사하지만 차이점이 있다.
- class가 아닌 ClassName으로 표기한다.
- 항상 camelCase 표기법으로 표기해야 한다. (기존의 onlick을 onClick으로)
flagment란?
JSX 요소들은 항상 한 개의 컴포넌트로 리턴이 되어야 한다.
그렇기 때문에 똑같은 head를 두 번 나열해서 쓰면 에러가 발생한다.
flagment가 등장하기 전에는 div나 span태그로 묶어서 사용했다.
예)
<div>
<Head title="this is a title" name = "this is a title"/>
<Head title="this is a title" name = "this is a title"/>
</div>현재는 flagment를 이용해 사용하면 된다.
즉 flagment는 컴포넌트들을 하나로 감싸서 리턴하게 하는 역할을 한다.
flagment 예)
<>
<Head title="this is a title" name = "this is a title"/>
<Head title="this is a title" name = "this is a title"/>
</>
예시 소스
import React from 'react';
import './App.css';
const Head = props => <h1>{props.title}</h1>
function App() {
return (
// flagment
<>
<Head title="this is a title" name = "this is a title"/>
<Head title="this is a title" name = "this is a title"/>
</>
)
}
export default App;라인별 설명은 아래 이미지에 나와있다.
728x90
반응형
'Javascript > React' 카테고리의 다른 글
| [React] Lifecycle (0) | 2020.10.19 |
|---|---|
| [React] Rendering(조건별 Rendering) (0) | 2020.10.19 |
| [React] JSX의 개념과 React 개발을 위한 ES6+ 필수 문법(Map) (0) | 2020.10.13 |
| [React] 개발 환경 설정(feat. node, vsCode) (Hello World 출력하기) (0) | 2020.10.13 |
| [React] React 다섯 가지 특징 (0) | 2020.10.13 |
