React - JSX의 기본규칙

신동훈·2022년 4월 20일
0

React

목록 보기
4/10

JSX란?

React에서 컴퍼넌트의 생김새를 정의

HTML 형식이지만 JavaScript이다.

babeljs.io를 통해 HTML형식을 JavaScript로 변환

JSX 규칙

  1. 태그는 닫혀 있어햐 한다.
    가. 태그 안에 내용이 없는 경우 셀프클로즈 태그 사용
  2. 두개 이상의 태그는 하나의 태그로 감싸야한다.
    가. 비어있는 태그로 감싸도 된다. '<></>'
    나. 소괄호로 감싸는 것은 부가적인 것일 뿐(가독성)

JSX 내부에서 JavaScript 사용하기

{} 사용


function App(){
	contst name = 'react'
    return(
   	   <div>{name}</div>
   (
}
export default App;

style 사용

  1. 객체 형태
  2. class (X)
    className
const style = {
	backgroud: 'gray'
}
return(
	<div style={style}>
    	<div className="my-style">
        </div>
    </div>

주석 사용

{/**/} 중괄호로 감싸서 사용

profile
독학 정리

0개의 댓글