React : JSX문법 3가지 (className, 데이터바인딩, style)

JSX란?

JSX는 JavaScript XML의 약어로, React에서 UI를 구성할 때 사용하는 문법이다. JSX는 HTML과 유사한 구문을 사용하며, React 요소를 생성하는 데 사용된다. JSX를 사용하면 JavaScript 코드 안에 마크업을 작성할 수 있다.

// jsx
const element = <h1>Hello, World!</h1>;

위와 같은 코드는 `Hello, World!`라는 텍스트를 출력하는 React 요소를 생성한다.
JSX는 Babel과 같은 도구를 사용하여 일반 JavaScript 코드로 컴파일된다.이렇게 변환된 코드는 React.createElement() 함수를 호출하는 코드로 변경된다. 따라서 위의 코드는 다음과 같이 변환된다.

// javascript
const element = React.createElement('h1', null, 'Hello, World!');

---

1. class는 className으로

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

---

2. 데이터바인딩 : 변수 등은 { 중괄호 }사이에 넣는다.

변수 외에 id, className 등에도 활용 가능하다.

import logo from './logo.svg';
import './App.css';

function App() {
  let post = '파판14 쌍검사길드 위치';
  // document.getElementById().innerHTML = post; 기존에는 이렇게 불편하게 했지만..

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

export default App;

---

3. HTML 내에 스타일을 넣을 때는 자료형으로 넣는다

<h4 style={ {color : 'purple', fontSize : '16px'} }>{ post }</h4>

font-size 처럼 속성명에 대쉬기호를 쓸 수 없다. 대쉬기호 대신 모든 단어를 붙여써야한다. 붙여쓸 땐 앞글자를 대문자로 치환해야한다.

---

출처 : 코딩애플 https://codingapple.com/