[코딩애플님 강의] 2. JSX 사용

 

왜 App.js가 메인페이지인가?

index.js에서 public/index.html에 App.js의 HTML코드를 넣어달라고 작성되어 있음

 

 

index.js => public/index.html의 id root div에 태그를 넣어주세요

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

index.html

 

 

CSS수정은 App.css 파일에서 해준다.

여기까지는 리액트의 장점이 부각되지 않지만

 

 

리액트의 큰 장점??

데이터 바인딩이 쉽다.

데이터 바인딩 = 서버에서 받은 데이터를 자바스크립트 변수에 저장해서 HTML에 넣어주는 작업

 

원래는 document.getElementById().innerHTML = ''

=>

App.js

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

function App() {

  let posts = '강남 고기 맛집';
  let style = { color : 'blue', fontSize : '30px'};
  
  function 함수() {
    return 100
  }

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

export default App;

 

코드가 간결해지고 직관적이게 된다.

 

상상하는 모든곳에 {}를 넣어도 가능하다.