react-tutorial
react-tutorial copied to clipboard
velopert
4. JSX · GitBook
꼭 감싸져야하는 태그 두가 이상의 태그는 무조건 하나의 태그로 감싸져있어야 합니다. 한번 다음 코드를 작성해보세요.
wrong spell I think
질문을 드릴께요...
리액트의 JS소스에서 어느 부분이 JSX문법으로 구현되어야 하는 건가요??
return(...); 에 괄호안에 부분이 JSX문법으로 만들어져야 하는건가요????
그럼 그 밖은 JSX가 아닌 JavaScript 부분인가요???
@JungJoongHwan
import React from 'react';
function App() {
const divTag = <div>TEST</div>;
return (
<>
{divTag}
</>
);
}
이렇게 사용할 수 있네요.
Babel이란?
- 자바스크립트 문법 확장해주는 도구
- 아직 지원하지 않는 최신 문법을 정식 자바스크립트로 변환해준다.
JSX 규칙
태그는 꼭 닫혀야 한다.
두개 이상의 태그가 존재한다면 꼭 하나의 태그로 감싸져야 한다.
Fragment란?
- 단순히 감싸기 용으로 태그를 이용해야 할 때 사용하면된다.
- 형태 : <> </>
Javascript 값 사용할 때에는 {}를 사용한다.
인라인스타일의 경우 style의 네이밍은 camelCase로 사용해야한다.
css파일에서 불어올때는 'className=' 으로 설정해야한다.
JSX 는 리액트에서 생김새를 정의할 때 사용하는 문법 (JavaScript) 리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 babel 이 JSX 를 JavaScript 로 변환
###JSX의 기본 규칙
-
태그는 꼭 닫기 두 개 이상의 태그는 무조건 하나의 태그로 감싸기 (Fragment <></> 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않음)
-
JSX 내부에 자바스크립트 변수 {} 으로 감싸기
-
JSX 에서 style 과 CSS class 인라인 스타일은 객체 형태로 작성 & camelCase 형태로 네이밍 class는 className= 으로 설정
-
JSX 내부의 주석 {/* 이런 형태로 */} 열리는 태그 내부에서는 // 이런 형태로도 가능
-
Babel은 자바스크립트의 문법을 확장해주는 도구
-
태그는 꼭 닫혀있어야 한다.
-
Self Closing 태그 => 태그와 태그 사이에 내용이 들어가지 않을 때
-
div 같은 걸로 감싸기 애매할 때 => 리액트의 Fragment 이용 <> </>
-
JSX 내부에 변수 보여주기 => {} 으로 감싸기
