리액트 JSX
리액트 컴포넌트를 만들 땐, 리액트를 불러와줘야 한다.
리액트 불러오기
import React from 'react';
리액트 컴포넌트는 함수형태로 작성할 수도 있고, 클래스형태로 작성할 수도 있다.
컴포넌트는 일종의 UI 조각이다. 쉽게 재사용 할 수도 있다.
리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있는데 이를 JSX 라고 부른다.
JSX의 기본규칙
JSX는 HTML 같이 생겼지만 실제로는 자바스크립트다.
리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel이 JSX를 자바스크립트로 변환해준다.
Babel은 자바스크립트의 문법을 확장해주는 도구다.
아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행할 수 있게 해준다.
규칙1. 태그닫기
태그는 꼭 닫혀있어야 한다.
Self Closing 태그도 괜찮다.
ex)
<Hello />
규칙2. 두 개이상 태그 감싸기
두 개 이상의 태그는 하나의 태그로 감싸져있어야 한다.
오류 ex)
<Hello />
<div>안녕히계세요.</div>
<div>안녕히계세요.</div>
정상 ex)
<div>
<Hello />
<div>안녕히계세요</div>
</div>
<Hello />
<div>안녕히계세요</div>
</div>
div 같은걸로 감싸기 애매하면 리액트의 Fragment 라는 걸 사용하면 된다.
js변수값 보여주기
JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {} 으로 감싸서 보여주면 된다.
<>
<Hello />
<div>{name}</div>
</>
<Hello />
<div>{name}</div>
</>