[React 입문] JSX 문법

1. JSX 문법이란? 

- JavaScript + xml 

- 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰 (UI)작업 편하게 가능

 

*리액트에서 뷰를 그리는 방법*

- JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다

- 리액트는 딱 하나의 html파일만 존재 (SPA 프레임워크)

 

 

2. 프로젝트 내의 JSX 문법 사용하기

(1) 무조건 1개의 엘리먼트 반환하기 

function App(){

 return (
 	<div className="App">
      <p> ~~
      <input> ~~~
    </div>
 );
}

(2) JSX에서 JS 값을 가져올때는 중괄호{} !

function App(){
 const cat_name = 'kitty';
 return (
	<div>
    	hello {cat_name};
    </div>
 );
}

(3) class 대신 className 사용

<div className="App">

(4) 인라인으로 style 주기

function App(){
 const styles = {
 	color : 'orange',
    fontSize : '20px'
 }
 

return (
	<div className ="App">
    	<p style={styles}> orange </p>
    </div>
 );
}