react 기초

index.js

 

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

 

index.js 라는 파일에서는 app.js 에 있는 코드를 public 폴더 밑에 있는 index.html 에 박아넣으라는 문구가 보인다.

 

 

 

 

 

 

 

 

 

 

 

 

JSX 에 대하여

 

function App() {
  return (
    <div className="App">
      ㄴㅇㄹㄴㅇㄹㄴㅇㄹ
    </div>
  );
}

 

app.js 파일 안에서 return 안의 소괄호에는 html 코드를 작성할수 있다.

 

그런데 여기에는 정확히는 JSX 문법을 작성해야 한다. (HTML 처럼 생긴 JSX 코드) 

 

그러나 html 의 div class 를 쓰면 안된다. 자바스크립트의 문법을 가지는 JSX 이기 때문에 class 는 자바스크립트의 class 를 나타내므로 div className 을 써주어야 한다.

 

 

 

 

 

 

 

 

 

 

리액트의 데이터 바인딩

 

function App() {
  let posts = "강남 고기 맛집";
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <h4>{posts}</h4>
    </div>
  );
}

 

리액트는 데이터 바인딩을 쉽게 해준다. ==> { 변수명 }

여기서 데이터 바인딩이란 "데이터를 HTML 에 박아넣는 것"

 

원래라면 document.getElementById().innerHTML = ''

이렇게 써야 하는데 JSX 문법은 { 변수명 } 만 쓰면 된다.

 

 

그래서 데이터 바인딩이 쉬워지는 React, Vue, Angular 를 쓰게 된다.

{변수명, 함수() 등 }

변수명 뿐만 아니라 함수.. 이런 것들을 작성할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

이미지

 

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>
  );
}

 

이미지를 가져오는 방법도 먼저 import 로 가져오고 그 후 img 태그 안에다가 { 이미지변수명 } 을 써주면 된다.

 

 

src, id, href 등의 속성에도 {변수명, 함수 등}

 

 

 

 

 

 

 

 

 

 

 

style

 

function App() {
  let posts = "강남 고기 맛집";

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

 

JSX 에서 style 속성 집어넣을 때

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

 

 

 

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

 

font-size 같은 경우는 - 는 자바스크립트에서 빼기 연산자와 같기 때문에 카멜케이스 표기법으로 써주어야 한다.

 

 

 

 

 

 

 

 

 

 

 

 

 

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

function App() {
  let posts = {color: 'blue', fontSize: '30px'}

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

 

물론 style 속성도 변수명으로 선언하여 {  변수 }  이렇게 쓰는 것도 가능하다. react 로 거의 모든 것을 쉽게 해낼 수 있다.