리액트 TODO 리스트 만들기 : #2 리액트에선 HTML 이 아닌 JSX 를 써야한다.

HTML 에서는 <div class='clsname'></div> 이렇게 쓰지만, React 로 만드는 .js 파일은 JSX문법을 써야하므로

class='' 가 아닌 <div className='clsname'></div> 를 써야한다.

 

App.js

import logo from './logo.svg';
import './App.css';
 
function App() {
  return (
    <div className="App">
     <div className="black-nav">
      <div>개발 Blog</div>
     </div>
    </div>
  );
}
 
export default App;
 

 

 

 

 

 

 

 

App.css

.App {
  text-align: center;
}
body {
  font-family : 'nanumsquare';
}
.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;
}
...생략
 

▲ 결과!!

 

 

 

 

 

 

 

 

 

 

App.js

...생략
function App() {
  let variable = '요건 변수야!';
  return (
    <div className="App">
     <div className="black-nav">
      <div>개발 Blog</div>
     </div>
     <h4>{variable}</h4>
    </div>
  );
}
...생략

React 에서 데이터 바인딩을 하려면 { } 중괄호 사이에 변수명, 함수 등을 넣으면 된다.

 

▲ 결과!!

 

{} 는 <div className={}> , <img src={}>, {} 등 다양하게 사용 가능하다!!

 

 

 

 

 

 

 

 

 

 

 

# CSS 적용 방법

 

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

HTML 에서는 style="color:blue; font-size:30px;" 이런 식으로 썼다면,

JSX 에서는 {} 안에 object 형식으로 써야한다. 또한 font-size 에서의 - 기호는 사용하지 못하고,

카멜표기법인 fontSize 로 사용해야 한다.