JSX

React

JSX

하루 2022. 2. 4. 18:35

JSX는 리액트에서 생김새를 정의할 때 사용하는 문법이다.

HTML같이 생겼지만 실제로는 Javascript 이다.

return <div>안녕하세요</div>;

리액트 컴포넌트 파일에서 XML 형태로 코드를 작성하면 Babel 이 JSX 를 Javascript 로 변환

Babel 이란?
자바스크립트의 문법을 확장해주는 도구이다.
아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로써 구형 브라우저 같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 한다.

JSX 기본 규칙

JSX 가 Javascript 로 변환이 되려면 지켜야하는 규칙

태그는 꼭 닫혀야 한다.
두 개 이상의 태그가 존재한다면 꼭 하나의 태그로 감싸져야 한다.
JSX 내부에 Javascript 값을 사용할 때에는 { } 를 사용한다.
인라인 스타일의 경우 객체 형태로 작성하며 style의 네이밍은 camelClass 로 사용해야 한다.
css 파일에서 불러올 때는 class 는 'className=' 으로 설정해야 한다.

1. 꼭 닫혀야 하는 태그

태그를 열었으면 꼭 <div></div> 이렇게 닫아주어야 한다.

HTML 에서는 input 또는 br 태그를 사용할 때 닫지 않고 사용하기도 하지만 리액트에서는 그렇게 하면 안된다.

태그와 태그 사이에 내용이 들어갈 때는 열리고 바로 닫히는 Self Closing 태그 < /> 를 사용해야 한다.

<input />
<br />

2. 꼭 감싸져야하는 태그

두 개 이상의 태그는 무조건 하나의 태그로 감싸져야 한다.

function App() {
  return (
    <div>
      <Hello />
      <div>안녕히계세요</div>
    </div>
  );
}

하지만 단순히 감싸기 위한 용도로 불필요한 div 를 감싸는게 좋지않은 상황도 있다.

이럴 때 Fragment 를 사용한다.

Fragment <></>

태그를 작성할 때 이름없이 작성을 하게 되면 Fragment 가 만들어지는데, Fragment 는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지 않는다.

function App() {
  return (
    <>
      <Hello />
      <div>안녕히계세요</div>
    </>
  );
}

3. JSX 안에 자바스크립트 값 사용하기

JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 { } 으로 감싸야 한다.

function App() {
  const name = 'react';
  return (
    <>
      <Hello />
      <div>{name}</div>
    </>
  );
}

4. style 작성

JSX 에서 태그에 style 과 CSS class 를 설정하는 방법은 HTML 에서 설정하는 방법과 다르다.

인라인 스타일은 객체 형태로 작성해야 한다.
camelCase 형태로 네이밍 해주어야 한다.

*camelCase 작성법

background-color 처럼 -(하이픈) 으로 구분되어 있는 이름들은 backgroundColor 처럼 지어야 한다.

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

5. CSS class

CSS class 를 설정할 때에는 class= 가 아닌 className= 으로 설정해주어야 한다.

App.css

.gray-box {
  background: gray;
  width: 64px;
  height: 64px;
}

App.js

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

6. 주석 작성법

JSX 내부의 주석은 {/* 이런 형태로 */ } 작성한다.

JSX 내부의 주석은 중괄호로 감싸지 않으면 화면에 보인다.

열리는 태그 내부에세서는 // 이런형태로도 주석 작성이 가능하다.

App.js

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      {/* 주석은 화면에 보이지 않습니다 */}
      /* 중괄호로 감싸지 않으면 화면에 보입니다 */
      <Hello 
        // 열리는 태그 내부에서는 이렇게 주석을 작성 할 수 있습니다.
      />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;