React - JSX

React JSX

React JSX 란 Javascript 에 xml을 추가하여 확장한 문법이다

javascript 에 html 을 작성하여 react를 만드는데 효율적으로 만들 수 있다.

// App.js

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

function App() {
  return (
    <div className="App">	// JSX 문법으로 js 파일에 html을 작성할 수 있다.
      <div>
        <h4>Blog</h4>
      </div>
    </div>
  );
}

export default App;

html의 h4 태그속성이 적용되어 화면이 출력이 된다.

className

html 태그에 className을 부여하여 html의 class 속성처럼 사용하여  App.css 파일을 import 하여 App.css 파일에 스타일을 적용해 줄 수 있다.

// App.js

import logo from './logo.svg';
import './App.css';	// App.css 파일을 import 한다.

function App() {
  return (
    <div className="App">
      <div className="black-nav">	// className을 부여했다.
        <h4>Blog</h4>
      </div>
    </div>
  );
}

export default App;

 

.black-nav {
  display: flex;
  background: #000000;
  width: 100%;
  color:#FFFFFF;
  padding-left: 20px;
}

 

App.css에 스타일을 적용하면 화면에 그대로 적용이 되어 나타난다.

 

 

데이터 바인딩 {} 중괄호 

react에서 변수를 html 태그 속에 넣을때 {} 중괄호를 사용하여 변수의 값을 넣어줄 수 있다.

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

let post = 'Restaurant';	// 변수를 선언한다.
let postId = 'postId';

function App() {
  return (
    <div className="App">
      <div className="black-nav">
        <h4 id={postId}>Blog</h4>	// html의 속성인 class, id 등 값을 넣을 수 있다.
      </div>
      <h4>{ post }</h4>	// {} 중괄호 안에 변수 값을 넣어 값을 불러온다.
    </div>
  );
}

export default App;

 

{} 중괄호의 값을 넣어 선언된 변수값이 제대로 들어갔는지 확인할 수 있다.

 

 

JSX 속 html style 속성 

JSX 파일 html 태그 속에 style 속성을 추가하려면 기존의 html 속 style 태그에 데이터 입력 방식이 조금 다르다.

style 속성을 사용할때는 {} 중괄호를 사용하여 넣어주고 object형식으로 값을 넣어주고 하이픈 ( - ) 대신 대문자를 사용하여 css 속성을 입력한다.

 

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

let post = 'Restaurant';
let postId = 'postId';

function App() {
  return (
    <div className="App">
      <div className="black-nav">
      	// style 속성에 {} 중괄호 속 object 형식으로 데이터를 넣어준다.
        <h4 id={postId} style={ { color: 'red', fontSize: '16px' } }>Blog</h4>
      </div>
      <h4>{ post }</h4>
    </div>
  );
}

export default App;

 

style 속성이 잘 들어간 것을 확인 할 수 있다.