[React] JSX문법

언젠가 꼭 학습해야하는 걸 알고 있었지만

바닐라 JS를 완벽하게 마치고 하려다보니

그 핑계로 자꾸 미루는 거 같아서 오늘부터 당장 배우기 시작했다.

 

import blahblah; 

function App(){ 
return ( 
<div className="App"> 
// 원하는 코드
</div> 
)};

리액트 설치와 환경세팅은 생략하고

기본 틀은 이렇다

​

주석처리된부분에 본인이 원하는 코드를 집어 넣으면 되는데

HTML파일을 따로 두지 않고

JS파일내에서 html 태그를 사용하며 바로 동작 시킬 수 있다.

​

그로인한 문법의 변화는 감안해야하고

이 문법을 JSX 라고 한다.

​

​

JSX의

특징 1)

<div className="App"> 
// 원하는 코드 
</div>

html 에서는 class명을 삽입할때

class = "aa"였지만

JSX 에서는 className="" 으로 선언한다.

​

​

특징2)

function App(){
let title_1 = 'YNWA'; 
return ( 
<div className="App"> 
<div className="title-1"> 
<div>{ title_1 }</div> 
</div> 
</div> 
) }

div태그에 변수를 넣고 싶을 때는

바닐라 JS보다 훨씬 편하게 태그 사이에 중괄호{ }안에 변수명만 집어넣으면 된다.

​

특징3)

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

태그에 style속성을 줄 때는 ""쌍따옴표 대신 중괄호 {{}}두개를 넣고 그 안에 스타일을 지정하는데

여기서 스타일 종류 중 font-size 같이 ' - ' 이 기호가 속해있으면 그 기호를 지우고 뒤의 단어의 앞글자를 대문자로 변경해 바꿔준다.