JXS란 무엇인가

• HTML을 품은 자바스크립트 문법이라고 생각하면 된다.
• 리액트가 화면을 그려주는 방법 :
  JSX문법을 이용해서 리액트요소(DOM요소같은)를 만들어 진짜 DOM에 렌더링하여 그려준다.

  render(){
            return(
  		<h1> DOM요소 같지만 리액트 요소랍니다. </h1>
         	   );
       }

  ->원래 스크립트 언어에선 html태그 사용이 자유롭지 못했는데 JSX문법 덕어 자유로워짐.

JSX문법 사용규칙

• 태그는 꼭 닫아주도록 한다.
  • 태그를 닫지 않으면 오류가 생긴다.
  • 하지만 오류메세지를 보면, 어디서 왜 오류가 생겼는지 설명해주니 빨간 화면에 겁먹지 않아도 괜찮다.
• 무조건 1개의 element만 return해야 한다.
  • 리턴값은 한개보다 많아도 안되지만,아예없어도 안된다.
    무조건 한개만 허용된다.(값이 빈걸 넣어주고 싶으면 null을 쓰면된다.)
• javacsript 값을 가지고 오는 방법
  • 자바스크립트의 값을 가지고 올때는 ' 블록 {} '을 이용해서 가져오면 된다.
• class(html) => className(JXS)
• inline으로 css주기
  style={{ 원하는 속성 : "속성값" }}
  • { 원하는 속성 : "속성값" } -> 딕셔너리 형태의 객체
  • 스크립트 값 끌어오기 -> {}
  • 따라서 {}가 두개 사용된다.
  • 자바스크립트에서 css를 줄때 문자열로 넘겨주지 않았다.
    .style 메소드를 통해 객체로 넘겨주었다. 따라서 JSX에서도 객체로 넘겨줘야 한다.