[React] JSX로 HTML 코딩하기

1. App.js 필요없는 것들 다 지운다.

JSX란?

JS함수인데, HTML 작성할 수 있다. 평소에 웹 만들 때처럼 HTML을 여기에 코딩하면 된다.

React는 HTML 대신 JSX를 사용한다.

 

2. 태그에 클래스를 설정할 때, className를 사용한다.

일종의 JavaScript이기 때문에, class라는 예약어가 있어서 className으로 설정한다.

css로 설정하기 위한 클래스이다.

 

3. React가 쌩 HTML보다 편한 이유

데이터 바인딩이 쉽다. React, Angular, Vue는 데이터바인딩을 쉽게 하게 도와주는 라이브러리이다.

전통적으로는 아래와 같이 진행하며, HTML에 넣는 식으로 진행한다.

let data = '배고프다'; // 서버에서 받아온 데이터
document.getElementById.innerHTML = data;

React에서는 중괄호를 사용하여 바로 html에 변수와 함수로 넣을 수 있다. { 변수명 }

function App() {
  let post = '좋은 아침';
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>안오늘의 개발 Blog</div>
      </div>
      <h4> { post } </h4>
    </div>
  );
}

함수의 경우에 { returnNumber() } 와 같이 사용할 수 있다.

 

4. img를 넣을 때, import를 하고 변수로 넣는다.

import logo from './logo.svg';

<img src= {logo} />

src, id, href 등에서 { 변수명 }을 사용한다.

 

5. JSX에 style 넣을 때

<div style="font-size: 16px"></div>

위와 같이 하면 에러가 발생한다. 무조건 중괄호 안에 object형식으로 넣어야 한다!!! 그리고 - 대신 camelCase를 사용해야 한다!

<div style={ {color: 'blue' }}></div>

오른쪽 값은 보통 string text가 들어간다.

style 넣기 귀찮으니 class를 만들어서 css파일에서 하는 게 좋다.