[React] JSX 문법과 데이터 바인딩

본격적으로 리액트를 이용해 HTML 페이지를 개발해보자.

그러기 위해선 리액트에서 HTML 대신 이용하는 JSX 라는 문법을 사용하여야한다. 

생긴건 HTML과 유사한데, 유의점이 몇개 있다. 

 

React를 프로젝트 셋팅이 완료되었으면 App.js로 들어가보자.

 

App.js가 메인페이지 역할을 하는 파일이다.

App.js를 잘 보면 div가 여러개 등장하는 HTML 부분이 있다.

필요없는 HTML 내용들은 다 지우고 div 하나만 남기고 시작해보자. 

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

function App() {
  return (
    <div className="App">
      // 코딩할 공간
    </div>
  );
}

export default App;

코딩을 하기전에 먼저 Visual Code를 세팅해주어야 한다.

 

1. 우측 최하단에서 아래 이미지부분을 클릭해준다.

2. 그럼 팝업이 하나 뜰 것이고 java를 입력 후 JavaScript React를 선택해준다.

이러면 코딩할 준비가 끝났다.

JSX에서 CSS class 사용법

(App.js)

function App(){
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
      </div>
    </div>
  )
}

 

(App.css)

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

위 코드처럼 APP.js와 그걸 디자인하는 APP.css를 코딩해보자.

근데 HTML을 잘 보면 className=”” 이라는 이상한 속성이 하나 있다.

리액트에서 class=””를 넣고 싶으면 className=”” 이라고 사용해야한다. 

 

실은 HTML을 작성하는 것 같지만 HTML이 아니라 JSX라는 문법이다. 

자바스크립트 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 리액트 기본 내장 문법이라고 생각하면 된다. 

JSX도 일종의 자바스크립트기 때문에

자바스크립트에서 사용하는 예약어인 class라는 키워드를 막 사용하면 안된다. 

className이라고 작성해야 CSS 파일의 class명을 박아넣을 수 있다. 

JSX에서 데이터바인딩하기

데이터바인딩이라는 전문용어는 별거아니고

자바스크립트 데이터를 HTML에 꽂아넣는 작업을 뜻한다. 

특히 요즘 프론트엔드 웹앱 개발시 데이터바인딩할 작업이 매우 많다고한다.

리액트는 이걸 매우 쉽게 구현할 수 있다. 

function App(){

  let data = '안녕하세요';
  
  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 blog</div>
        <div>{ data }</div>
      </div>
    </div>
  )
}

 

위 코드를 구동시키면 <div>{ data }</div>부분에 위에서 정의한 data 변수에 데이터가 출력된다.

변수 뿐만 아니라 미리 만들어둔 함수명이든 뭐든 별걸 다 집어넣을 수 있다.

그리고 href, id, className, src 등 여러가지 HTML 속성들에도 데이터바인딩이 가능하다. 

HTML에 스타일을 직접 넣고 싶으면 

<div style={ {color : 'blue', fontSize : '30px'} }> 글씨 </div>