React.js | 입문 | JSX

 

JSX란 리액트에서 생김새를 정의할 때 사용하는 문법이다. Javascript이나 HTML같이 생겼다.

 

JSX에서 꼭 지켜줘야 하는 문법이 있는데, 바로 태그를 꼭 닫아주어야 한다는 것이다.

 

 

컴포넌트 안에 변수를 선언하거나 style을 json형태로 선언하고, { } 중괄호 안에 담아서 속성을 부여할 수도 있다.

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

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

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

export default App;

 

 

참조

https://react.vlpt.us/basic/04-jsx.html