React JSX

JSX 특징

1. render(JSX)

react 에서 component 를 render 해줄땐

document.querySelector("#root").appendChild(...)	// 가 아닌
                                            
ReactDOM.render(
  element,	//render 할 태그, 내용 ex) "<h1>Hello world</h1>"
  document.getElementById('root')
);

//or

class render extends React.Component
	render(){
    	return <h1>Hello, {formatName(user)}!</h1>;
    }

와 같은 JSX 를 사용한다.

2. variable render

변수를 같이 렌더링 해줄땐

//js
`hello ${username}`

//JSX
remder(){
  return <h1> hello {prop.username} </h1>
}
// 와 같이 { } 안에 변수를 담는다.

3. empty tag

내용이 비어있는 태그를 사용할땐

render(){
  <img src={user.avataUrl} />
}

와 같이 < /> 로 사용할수 있다.

4. XSS

기본적으로 XSS 에 안전하다.

5. babel

babel 로 인하여 render() { } 함수가 React.createElement 로 변환된다.

render() {
  <h1 className="hello">
    Hello world
  </h1>
}
//babel 로 변화
React.createElement(
  <h1>,
  {calssName : "hello"},
  "Hello world"
)

대 소문자

JSX 는 기본적으로 렌더링을 할때 시작하는 글자가 소문자면 HTML 태그를 렌더링하며, function 으로 새로운 이름의 태그를 만들때 에는 대문자로 시작해야한다

function Div(name) {
  return <div>Hello {name} </div>;
}

reactDom.render(
  <Div name="Sara" />, // 위에 정의해준 함수
  <div>Hello</div>,     // HTML 태그 div
  document.querySelector('#root')
)