[React : 02] JSX

https://www.youtube.com/watch?v=FqnAFX9lQPQ 

강추 합니다!

 

 

- React에서는 html 대신에 JSX 라는 문법을 사용한다.

 

- class가 아니라 className을 사용하는 이유 :

JavaScript에서 class라는 예약어가 있기 때문에 React는 이처럼 조금씩 문법이 다르다. 

 

- html과 거의 비슷한데 왜 html+css 대신에 React를 사용하느냐?

데이터 바인딩을 쉽게 할 수 있다. 

* 데이터 바인딩 : 서버에서 받아 온 데이터를 자바스크립트로 저장한 다음 HTML에 꽂아 넣는 작업

 

{중괄호}를 이용해서 쉽게 바꿀 수 있기 때문!

React, Vue, Angular를 사용하는 이유도 바로 이것 때문이라고 한다.

 

 

 

 

< App.js >

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

function App() {

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

  return (
    <div className="App">
      <div className='black-nav'>
        <div style={ { color : 'wheat', fontSize : '30px'} }>개발 Blog</div>
      </div>
      <img src={ logo } />
      <h4> { 함수() } </h4>
      {/* <h4> { posts } </h4> */}
    </div>
  );
}

export default App;

이런 식으로 변수화 시켜서 데이터 바인딩을 쉽게 처리할 수 있는 게 리액트의 장점이다. 라인이 길어지는 걸 막고, 익숙해진다면 시간도 절약할 수 있어서 편하다는 게 강점!

 

 

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

이 부분도 이렇게 바꿀 수 있다.

 

let ftStyle = { color : 'wheat', fontSize : '30px'}


<div style={ ftStyle }>개발 Blog</div>

스타일도 변수화 시켜서 style 안에 넣는다.

 

 

< App.css >

.App {
  text-align: center;
}

body {
  font-family: "nanumsqure";
}

.black-nav {
  background: black;
  width: 100%;
  display: flex;
  color: white;
  padding: 20px;
  font-weight: 600;
  font-size: 20px;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}