React - jsx(JavaScript Xml)

JSX란?

const element = <h1>Hello, world!</h1>;
//HTML인가 자바스크립트인가...?

리액트에서 쓰는 자바스크립트의 확장형이다.

자바스크립트지만 공식 자바스크립트가 아니기 때문에 브라우저에서 읽을 수 없다. 코드가 번들링 될 때 Babel을 사용하여 자바스크립트로 변환된다.

 

JSX를 꼭 써야하는 것은 아니지만 유지보수에 도움이 되며 에러를 줄일 수 있기 때문에 쓰는 것을 추천한다.

또한 코드 작성에 있어서 굉장히 편하다

 

jsx를 사용하지 않는다면 복잡한 컴포넌트의 경우 수많은

React.creatEelement 가 잔뜩 적힌 파일들을 보게될 것…!

Rule of JSX

1. 변수를 사용할 때는 {}로 감싸주어야한다.
   1. Boolean, undefined, null값은 표시되지않는다.
   2. 배열의 경우 콤마가 제외되고 보인다.
   3. 객체 출력은 에러를 발생시킨다. → 단, 객체가 property로 들어가는 경우는 가능하다.

function App() {
  const name = "hyeon"
  const age = 30
	const isChild = false;
	const array = [1, 2, 3]
  return (
		<div>
	    <div>hi my name is {name} my age is {age}.
			Is she a child? {isChild} // 아무것도 표시되지않음.
			array : {array} // print : 123
			</div>
		<input style={{ border: '2px solid orange', marginTop: '10px' }} /> // property로 들어간 경우는 ok
		</div>

  )
} export default App;

1. props name은 항상 camelCase로 작성한다.
   1. autoFocus, maxLength → camelCase 작성이 헷갈리는 경우 브라우저에서 경고문을 띄워주므로 참고하자.
2. 숫자도 {}에 작성
3. Boolean값을 작성하는 경우 아무것도 작성하지않으면 true가 default 값이며 false를 나타내는 경우 {} 안에 작성
4. class가 필요한경우 className으로 작성
5. 인라인 스타일을 작성하는 경우에는 객체로 작성하고 camelCase로 작성

import React from 'react'

function App() {
  const inputType = 'number'
  const minValue = 5
  return (
    <div className="app-div">
      <input type={inputType} min={minValue} max={10} style={{ border: '3px solid blue' }} />
      <textarea autoFocus={false} /> //autoFocuse 또는 autoFocus={true}
      <input maxLength={5} style={{ border: '2px solid orange', marginTop: '10px' }} /> //인라인 스타일
    </div>

  )
} export default App;

 

JSX React 문서 확인