React 입문 : JSX 문법 - className, style, {중괄호}

HTML을 품은 JS ⇒ JSX!

react는 자바스크립트로 이루어져 있으며, 자바스크립트내에 html을 그려주는 형식을 채택하였다.

그런데 자바스크립트 안에서 html 태그들을 사용하는데 얼마나 불편한지 생자바스크립트로 html 태그 써준 모든 사람들은

불편함을 겪었을 것이다.

그래서 나온 것이 JSX라는 편리한 자바스크립트 안에서 html element요소들을 그려주는 편리한 문법인데,
이것을 react에서 사용하여 UI를 꾸며준다.

function App() {

  // 여기가 자바스크립트를 쓸 수 있는 영역입니다.

  return (
    
    // JSX(Javascript + XML - HTML) 
    //return 안에서 자바스크립트 코드를 넣고 싶다면 {}, 중괄호를 열고 그 안에다 집어 넣어줘야함
      
    /* HTML/JSX 영역 */

  );
}

1. html에 class 넣을 땐 className

// html 
<h1 class='hello'>hello World</h1> 

// JSX 
<h1 className='hello'>hello World</h1> 

2. 변수 || 함수등 Javascript 문법을 html에 넣을 때는 {중괄호}

function App(){

  let post = '글자';
  return (
       <div>{ post }</div>
  )
}
// rendering되면
'글자' 가 웹에 보인다.

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

헷갈려했었는데, 오브젝트로 반환 해줘야 하며, key에 들어갈 style 속성에는 camelCase로 작성부탁한다.

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