1. JSX

React에서 사용되는, 시간에 따라 이벤트처리를 위해 State가 동기화되는 방식으로

기존 자바스크립트를 확장하여 만들어진 문법이다.

 

＃ class 가 아니라, className 예약어를 사용한다.

- Js 파일이기 때문에, class가 아닌, 준비된 예약어 className을 사용한다.
- 즉, <div class = "App-function"> 과 같이 사용하여 CSS를 적용한다.




＃ 리액트의 데이터 바인딩 방법 [ 중괄호 { } 사용 ]

- 중괄호 {} 에 변수명이나 함수를 넣기만 하면 됨, ejs문법에서는 <%= %> 과 같은 표현식을 사용해야 했음
- (일반 js 에서는 dom 제어[document.getElementById("john")] , jquery dom 제어 처럼[ $("#john") 선택자 처럼 )

- 하나의 파일 내에 js 함수를 정의하고, html에 표시할 내용과 같이 쓸 수 있음.
( 예를들어, 하나의 함수를 만들고, html을 return 하는 곳에 함수를 가져다 쓸 수 있음 ) 




＃ 인라인 스타일을 지정하는 법

- <div style={ { color: 'blue' } } > 와 같이, object 자료형태로 넣어야 한다.
- 물론, style 에 들어갈 것을 변수로 지정해서 쓸 수도있다.   변수에 스타일 스트링을 넣고, 변수로 사용하는 방법
- 단, 괄호 내 모든 예약어의 경우, CamalCase 가 적용되어야 한다  * fontsize 가 아닌 fontSize . 

 

 

＃ className은 Tag명으로 사용될 수 있다.


- 예를 들어, <div className = "example"></div> 이라는 div 태그는 <Example></Example>로 쓸 수있다.
- 리액트의 컴포넌트 문법으로, 일반 html에서는 스타일등을 적용하는 엘리먼트로써 사용할 수 있음.
- 리액트에서 컴포넌트를 사용하기 위해 function Example(){ return ( <div className= "example"></div> ) } 로 본문에 표기할 내용을 return 값에 넣어 반환 함.
- 단, 태그명의 첫 번째 글자는 대문자 이여야 한다.
- 마찬가지로 하나의 return 안에, 여러 같은 층의 태그가 존재할 수 없다.
( 따라서 div를 하나 놓고, 그 안에 div 혹은 다른 태그들을 넣는 식으로 만들어야 한다.

- div가 아닌 Fragment 를 사용할 수 있는데,  <> </> 로 사용할 수 있으며, 자식 노드들을 묶을 수 있다. ( 루트 div 대신 사용 가능 )