[REACT] JSX 기본 문법

react 를 사용하는 이유

- web-app을 만들 때 가장 유용한 라이브러리가 react/angular/vue.

- 모바일앱으로 발행이 쉬움

- 앱처럼 뛰어난 ux

 

JSX

- Javascript에서 확장된 문법으로 html처럼 생겼으나 다른 문법이다.

 

1 태그에 class를 주고 싶을때

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

 

2 데이터 바인딩(변수, 함수, 이미지, 속성 등 모두 가능)

- 서버에서 가져온 데이터를 보여주는 것.

- {변수명}

이렇게 그대로 사용해서 가져올 수 있다.

function App() {

  let posts = '부산 고기 맛집';

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <h4>{posts}</h4>
    </div>
  );
}

export default App;

- {함수}

function App() {

  let posts = '부산 고기 맛집';
  function 함수(){
    return 100;
  }

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <h4>{함수()}</h4>
    </div>
  );
}

export default App;

- 이미지 임폴트

이미지를 넣을 때, 위에서 import를 시킨 뒤

<img src={logo}/>

img 의 속성 안 중괄호에 변수명을 넣어서 출력할 수 있다.

src, id, href 등의 속성에도 데이터 바인딩이 가능하다.

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

import './App.css';


function App() {

  let posts = '부산 고기 맛집';
  

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <img src={logo}/>
      <h4>{posts}</h4>
    </div>
  );
}

export default App;

 

3 JSX에서 style 속성 집어넣을 때

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

camelCase 작명관습에 따라 속성명을 바꿔줘야 한다.

function App() {

  let posts = '부산 고기 맛집';
  

  return (
    <div className="App">
      <div className="black-nav">
        <div style={{color : 'blue', fontSize : '30px'}}>개발 Blog</div>
      </div>
      <h4>{posts}</h4>
    </div>
  );
}

export default App;

변수로 스타일 속성을 지정해서 사용할 수도 있다.

function App() {

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

  return (
    <div className="App">
      <div className="black-nav">
        <div style={posts}>개발 Blog</div>
      </div>
      <h4>{posts}</h4>
    </div>
  );
}

export default App;