[React] JSX 문법 3가지

0. JSX란?

• JSX(Javascript XML)란 javascript를 확장한 문법.
• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성 가능.

// JSX 예시
function App() {
	return (
      <div>Hello, React!</div>
    );
}

// JSX 코드를 작성후 브라우저에서 실행 되기전에 바벨이 자바스크립트 형태로 변환을 시켜준다.
// Babel - javascript compiler
function App() {
	return React.createElement("div", null, "Hello, React!");
}

1. JSX 문법 3가지

1.1. html에 class 넣을 땐 className

• class 가 ES6 의 클래스 문법의 예약어이기에 대신 className 사용

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <h4>블로그임</h4>
      </div>
    </div>
  )
}

1.2. 변수를 html에 꽂아넣을 때는 {중괄호}

• 데이터바인딩: JSX에서는 변수를 사용할 때, {}를 사용한다.

import './App.css';

function App() {

  let post = '블로그 글 제목'; 

  return (
    <div className="App">
      <div className='black-nav'>
        <h4>블로그</h4>
      </div>
      <h4> {post} </h4> 
    </div>
  );
}

export default App;

1.3. html에 style속성 넣고싶으면 style = {{ style} }

• JSX에서는 스타일을 지정할때도 { }로 감싸주어서 그 안에 지정할 스타일들을 작성.

import './App.css';

function App() {

  let post = '블로그 글 제목';

  return (
    <div className="App">
      <div className='black-nav'>
        <h4 style = { {color : 'red', fontSize : '16px'} }>블로그</h4>
      </div>
      <h4>{ post }</h4>
    </div>
  );
}

export default App;

• style = { } 안에 들어갈 속성들을 객체 형태 {}로 한번 더 감싸준다.
• React 에선 CamelCase 사용.
• key: value 형태

CSS 참고
Tailwind CSS

<button className="py-2 px-4 rounded-lg shadow-md text-white bg-blue-500">
  Click me
</button>