JSX 문법

태그에 className을 줘서 사용할수있다

// app.js
import './App.css';

<div className="클래스이름">
</div>

// app.css
.클래스이름{
	css주기
}

리액트에서의 데이터 바인딩

Binding : 받아온 데이터를 js에 저장한후 html로 넣어서 출력해주는 것

function App() {

  let post = "강남";

  return (
    <div className="App">
      <div className="b-nav">
        뿌에에
      </div>
      <h4> 블로그 글 </h4>
      <h4> { post }</h4>
    </div>
  );
}

export default App;

출력결과

중괄호를 사용해 바인딩이 가능하다.

function App() {

  function 함수() {
    return 100;
  }

  return (
    <div className="App">
      <div className="b-nav">
        뿌에에
      </div>
      <h4> 블로그 글 </h4>
      <h4> { 함수() }</h4>
    </div>
  );
}

export default App;

변수뿐아니라 함수도 바인딩이 가능하다

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

function App() {

  return (
    <div className="App">
      <div className="b-nav">
        뿌에에
      </div>
      <h4> 블로그 글 </h4>
      <img src = {logo} />
    </div>
  );
}

export default App;

src, id, href등의 속성에도 {변수명, 함수} 등을 넣어서 바인딩이 가능하다

JSX에서 Style 주는 법

function App() {
  return (
    <div className="App">
      <div style={{color: 'blue'}}> 블로그 글 </div>
    </div>
  );
}

export default App;

style={object 자료형으로 만든 스타일}

function App() {
  return (
    <div className="App">
      <div style={{color: 'blue', fontSize:'30px'}}> 블로그 글 </div>
    </div>
  );
}

export default App;

style을 연달아 사용할 때는 ,(콤마)로 이어서 사용한다.

function App() {

  let post = {color: 'blue', fontSize:'30px'};

  return (
    <div className="App">
      <div style={ post }> 블로그 글 </div>
    </div>
  );
}

export default App;

스타일 역시 변수명으로 지정해 {}에 넣어 사용할수 있다