소개

React를 학습하고 JSX에 대해 이해가 얕아서 이번에 간단하게 정리해 보았습니다.

JSX는, 원래 무엇이라고 생각한 사람은 이쪽으로부터 참조해 주세요.

JSX 기초 문법

①React 라이브러리를 import한다

import React from 'react';

②return 문 안이 JSX 구문

import React from 'react';

const BlueButton = () => {
   return (
    <button className={'btn-blue'}>
      Click me!
    </button>
  )
}

export default BlueButton;

기본적으로 HTML과 같은 구문. class 요소는 className으로 바뀝니다
JSX의 외형은 HTML이지만, 실제 Javascript로 주의가 필요! ! ! !
class라고 기재해 버리면 오브젝트의 class라고 인식해 버리므로, 명시적으로 className과 나누기 위해서 className과 붙어 있다. 그 후에 클래스명을 기재할 필요가 있다.

JSX 기초 문법 弍

import React from 'react';

const Thumbnail = () => {
   const caption = 'sample写真'
   const imagePath = '/img/sample.png'

   return (
　　　　　　　 <div>
      <p>{caption}</p>
      <img src={samplePath} alt={'sample写真'} />
    </div>
  )
}

export default Thumbnail;

1. 낙타 케이스로 설명

imagePath

2.{}로 변수를 다룰 수 있다

{}를 사용하면 Javascript의 세계라고 명시적으로 사용할 수 있다.
const caption = 'sample 사진'
P 태그에서 {caption}을 사용하면 최종 출력으로 "sample 사진"문장이 출력된다.

마찬가지로,

{　}을 JSX의 세계가 되십시오.
3. 닫기 태그 필요

/> 닫기 태그가 없으면 오류가 발생하므로 기재하도록합시다!