[React]JSX 기초 문법

[React]JSX 기초 문법

JSX 문법이란 html와 비슷한 리액트에서 사용하는 문법이다.

1. 클래스(ClassName) 부여와 스타일 적용

<div className="클래스명"></div>

기존의 html에서 사용한 class=”클래스명”이 아닌 className=”클래스명”을 사용한다.

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css'; // 스타일 시트를 임포트해서 사용할 수 있다.

function App() {
  return ( //return 안쪽에 html 문법을 작성할 수 있다.
    <div className="App">
      <div className="black-nav">
         <div>개발 Blog</div>
      </div>
      <h4>블로그 글</h4>
    </div>
  );
}

export default App;

 

2. 데이터 바인딩 : { 변수명 }, { 함수명() }, { 이미지별명 }

 App.js

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

function App() {

  let posts = '강남 고기 맛집';

  function 함수(){
    return 100;
  }

  return ( //return 안쪽에 html 문법을 작성할 수 있다.
    <div className="App">
      <div className={ posts }>
         <div>개발 Blog</div>
      </div>
      <img src={ logo } />
      <h4>{ posts }</h4>
      <p>{함수()}</p>
    </div>
  );
}

export default App;

 

3. Style 속성 넣기

<div style= {{ color : 'cadetblue', fontSize : '30px'}}>개발 Blog</div>

전체코드

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

function App() {

  let posts = '강남 고기 맛집';

  function 함수(){
    return 100;
  }

  return ( //return 안쪽에 html 문법을 작성할 수 있다.
    <div className="App">
      <div className="black-nav">
         <div style= {{ color : 'cadetblue', fontSize : '30px'}}>개발 Blog</div>
      </div>
      <img src={ logo } />
      <h4>{ posts }</h4>
      <p>{함수()}</p>
    </div>
  );
}

export default App;

결과 화면