리액트 JSX 문법

리액트에서는 html 대신 JSX라는 걸 써서 웹 페이지를 만들어나간다.

 

JSX 문법 1. html에 class 넣을 땐 className 

(App.js)

function App(){

  return (
    <div className="App">
      <div className="black-nav">
        <h1>동욱의 블로그</h1>
      </div>
    </div>
  )
}

App.js 파일에 html 코드와 비슷한 코드는 html이 아니라 JSX이다. 

원래 리액트 환경에서 <div> 하나 만들고 싶으면 자바스크립트로 

React.createElement('div',null)

이런 식으로 어렵게 코드를 짜야한다. 근데 이러면 리액트를 사용하는 유저들이 다 도망갈것이다. ㅋㅋ😭

그래서 리액트 개발자들은 JSX라는 언어를 대신 사용하게 해주었다. JSX는 html과 사용방식은 비슷하다.

 

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

그래서 class="" 를 넣고 싶다면 className="" 이라고 써야한다. 

 

 

 

JSX 문법 2. 변수를 html에 데이터바인딩 할때는 {중괄호}

(App.js)

function App(){

  let title = '리액트 JSX 문법';
  return (
    <div className="App">
      <div className="black-nav">
        <h1>동욱의 블로그</h1>
      </div>
      <h2>여기에 title 변수에 있는 데이터를 꽂아 넣고싶다면?</h2>
    </div>
  )
}

자바스크립트 변수같은 곳에 있던 데이터를 html 중간에 꽂아서 보여주고 싶을 때가 많다. 

 

저 let title 안에 있던 데이터를 <div>안에 꽂아넣고 싶으면 어떻게 해야할까?

옛날 자바스크립트 문법을 쓴다면 document.getElementById().innerHTML = ?? 이런 식으로 길게 짜야했지만

리액트에서는 더 쉽게 데이터를 꽂아넣을 수 있다.

중괄호안에 데이터바인딩하고 싶은 변수명만 담으면 된다.

(App.js)

function App(){

  let title = '리액트 JSX 문법';
  return (
    <div className="App">
      <div className="black-nav">
        <h1>동욱의 블로그</h1>
      </div>
      <h2>{title}</h2>
    </div>
  )
}

그럼 미리보기화면에서 <h2>리액트 JSX 문법</h2>  라고 출력된다. 매우 편리하다!

 

(App.js)

function App(){

  let title = '리액트 JSX 문법';
  let data = 'blue';
  return (
    <div className="App">
      <div className="black-nav">
        <h1>동욱의 블로그</h1>
      </div>
      <h2 className={data}>{title}</h2>
    </div>
  )
}

온갖 곶에 {} 중괄호를 열어서 변수들을 집어넣을 수 있다.

href, id, className, src 등 여러가지 html 속성들에도 가능하다.

위처럼 쓰면 <div className="red"> 이렇게 된다.

 

변수에 있던걸 html에 꽂아넣는 작업을 데이터바인딩이라고 한다.

 

 

 

JSX 문법 3. html에 style속성 넣고싶으면

<div style="color : blue"> 이런걸 넣고 싶으면

JSX 상에서는 style={ } 안에 객체 자료형으로 집어넣어야한다.

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

이렇게 넣어야한다.

 

- { 속성명 : '속성값' } 이렇게 넣으면 된다. 

- 근데 font-size 처럼 속성명에 대쉬기호를 쓸 수 없다.

대쉬기호 대신 모든 단어를 붙여써야한다. 붙여쓸 땐 앞글자를 대문자로 치환해야한다. (카멜케이스)

 

css 파일 열기 귀찮을 때 쓰면 된다.