JSX 문법 알아보기 |
JSX 문법을 사용하면 자바스크립트 코드에 HTML 태그들을 쉽게 사용할 수 있다.
이 JSX 문법을 사용하기 위해서는 index.js에 아래와 같이 추가해줘야한다.
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
|
💡 ReactDOM.render 는 무엇인가?
컴포넌트를 브라우저 페이지에 랜더링하는 역할을 하며 "react-dom" 모듈을 불러와서 사용한다.
이 함수의 첫번째 파라미터에 페이지에 랜더링할 요소를 JSX 형식(또는 컴포넌트)으로 작성하고,
두번째 파라미터에 랜더링 할 실제 DOM 요소를 작성한다.
1. JSX 란
자바스크립트에 HTML 형식을 추가한 자바스크립트 확장 문법이다.
( 정확하게는 XML 형식을 추가한 문법이다. )
return <div>React!</div>;
|
리액트 컴포넌트에서 HTML 형태로 코드를 작성하게 되면 babel은 이를 자바스크립트로 변환해준다.
https://bit.ly/2wMpkk2 여기에 들어가서 babel이 어떻게 변환시키는지 확인해보자!
💡 Babel 이란?
JSX 문법 및 최신 사양의 자바스크립트 코드를 IE 브라우저 또는 구형 브라우저에도
동작할 수 있게 ES5(이전 버전)으로 변환(= 트랜스파일링)해주는 도구이다.
2. JSX 규칙
babel이 JSX 을 올바르게 변환해주려면 JSX 규칙대로 작성해야한다.
01) 닫는 태그
JSX 는 XML 형식으로 작성해줘야한다. 즉, 닫는 태그를 생략하면 에러가 발생한다.
빈태그 역시 닫아줘야한다.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello >
<br>
</div>
);
}
export default App;
|
( 결과 화면 )
02) 감싸인 태그
컴포넌트에 두개 이상의 요소가 있다면 하나의 태그로 감싸야한다.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
<Hello />
<Hello />
</div>
);
}
export default App;
|
💡 왜 두개 이상의 요소가 있으면 하나의 요소로 감싸야 하나?
Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있게
컴포넌트 내부는 하나의 DOM 트리 구조로 구성되어야 하기 때문
💡 그럼 꼭 저렇게 div 태그로만 작성해야 하나?
저 div 태그를 사용하고 싶지 않다면 Fragment라는 기능을 사용하면 된다.
- 사용하기 위해서는 react 모듈에서 제공하고 있는 Fragment라는 컴포넌트를 불러와야한다.
→ import React, {Fragment} from 'react';
import React, {Fragment} from "react";
import Hello from "./Hello";
function App() {
return (
<Fragment>
<Hello />
<Hello />
</Fragment>
);
}
export default App;
|
위 코드는 아래와 같이 <></> 요소로 간단하게 작성할 수 있다.
(단, 속성을 넣을 때는 div 요소나 Fragment를 사용해야한다.)
import React from "react";
import Hello from "./Hello";
function App() {
return (
<>
<Hello />
<Hello />
</>
);
}
export default App;
|
03) 자바스크립트 코드
JSX에서 자바스크립트 코드를 작성할 때는 중괄호({ })를 사용해서 그 안에 작성한다.
import React from "react";
function App() {
const sayHello = "hello";
return <div>{sayHello}</div>;
}
export default App;
|
( 결과 화면 )
4) 주석처리
JSX에서 주석을 사용하려면, 중괄호 안에 /* */ 으로 작성하거나 열린 태그 안에 // 으로 작성한다.
import React from "react";
import Hello from "./Hello";
function App() {
return (
<>
<br />
{/* 빈태그도 닫는 태그를 반드시 작성해야한다. */}
<Hello
// 열린 태그에서는 이런식으로 주석 처리할 수 있다.
/>
</>
);
}
export default App;
|
💡 주석을 사용하는 이유?
개발을 혼자하는 거라면 내가 알아보기 쉽게 코드를 작성하면 그만이지만
여러 사람들과 협업해서 개발하는 상황이라면 다른사람들이 알아보기
쉽게 주석으로 코드에 대한 설명 및 기능에 대해서 작성할 필요가 있다.
정말 좋은 코드는 주석없이 코드로 설명이 되는 코드지만 아직 배우는 입장에서는
코드에 대한 설명(목적)과 그 기능에 대해 정리하는 것이 좋다.
---
참조
- 리액트: 벨로버트 강좌(+ Gitbook )
- 주석 부분: javascript.info
'Frontend study > Reactjs' 카테고리의 다른 글
리액트 - 5. Props와 State (0) | 2022.07.03 |
---|---|
리액트 - 6. 리액트에 조건문 사용하기 (0) | 2022.07.03 |
리액트 - 3. 컴포넌트 만들기 (0) | 2022.04.28 |
리액트 - 2. 작업환경 세팅하기 (0) | 2022.04.20 |
리액트 - 1. 리액트 시작하기 (0) | 2022.04.20 |