React) 기본 JSX문법 3가지 className / {변수} / style={{}}

JSX 문법이란?

React에서 html을 구성할 때 원래라면

React.createElement('div'null,'Hellow Oching?');

이런식으로 짜야함. 매우 귀찮고 어려워보임..
그래서 누군가가 JSX라는 문법으로 html과 비슷한 구조의 언어로 짤 수 있는 방법을 만들어냈다. 이 영특한 JSX 덕분에 현재 React는

function App(){
	return (
    	<div className="App">
        	html을 구성하는 실행구문들
        </div>
    )
}

이렇게 html과 비슷한 구조로 js안에서 짜여져있음!

---

아주 기본이 되는 세가지 중요한 문법

1. Class를 넣을 땐 className

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

function App() {
  let post = "오늘의 날씨 정보";

  return (
    <div className="App">
      <div className="black-nav">  //className 으로 class지정.
        <h4>Oching Blog</h4>
      </div>
      <h4>{post}</h4>
    </div>
  );
}

export default App;

html에서는 class로 지정했지만
js안에서 class문법과 혼동될 수 있기에
JSX 문법안에서는 className라고 명명해야한다.

2. 변수를 넣을 땐 중괄호에! {변수} , 데이터바인딩!

프론트앤드 개발에서 웹 화면을 렌더링할 때
사실상 서버에서 어떤 데이터자료를 가져와 뿌려주는 역할을 할 것.
때문에 어떤 자료를 변수에 담고 그걸 참조하는 형식으로 구조를 짠다.
이러한 일을 데이터바인딩이라고 함.

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

function App() {
  let post = "오늘의 날씨 정보";  //서버에서 가져온 자료라고 가정. 

  return (
    <div className="App">
      <div className="black-nav"> 
        <h4>Oching Blog</h4>
      </div>
      <h4>{post}</h4>  //서버자료를 post라는 변수에 담아 뿌려줌
    </div>
  );
}

export default App;

3. style을 지정할 땐 style={{스타일속성 : '값'}}

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

function App() {
  let post = "오늘의 날씨 정보";  //서버에서 가져온 자료라고 가정. 

  return (
    <div className="App">
      <div className="black-nav"> 
        <h4 style={{color:'blue', fontSize:'21px'}}>Oching Blog</h4>  //style지정
      </div>
      <h4>{post}</h4>  
    </div>
  );
}

export default App;

style={{color:'blue', fontSize:'21px'}}
객체의 형태로 받기때문에 {{}}를 중첩한 형태라는 점과,
font-size가 아닌 fontSize와 같이 카멜케이스로 속성명을 지정해줘야한다는 점에 유의할 것. js에서 -는 산술연산자로서 인식되기 때문이다.