JSX(JavaScript XML)

• React에서 사용자 인터페이스(UI)를 구성하는데 사용되는 JavaScript의 확장 문법
• HTML과 유사한 문법
• JavaScript 코드 안에서 UI를 표현
• JSX는 브라우저에서 직접 실행이 불가
  • 번들링을 통해 JavaScript코드로 변환되어 실행
• retrun()안에 작성된 코드가 JSX

function Car() {
  const hp = 218 * 1.36;
  return (
    <>
      <h1>My car</h1>
      <p>It has {hp} horsepower</p>
    </>
  );
}

사용 방법

• 단일 부모 태그로 마크업 <div></div> 혹은 <></>를 사용

• 변수값을 HTML에 출력하고 싶은 경우 {변수명} 를 사용하여 작성

• style속성 사용법 style={ } 안에 { } 으로 작성 font-size 같이 속성명에 -가 있는 경우 카멜기법 사용

• HTML요소의 속성 사용 기본적으로 HTML요소의 속성과 동일하지만 몇몇 예외사항 존재 JavaScript의 예약어(예: class, for 등)인 경우 두 단어 이상 조합인 경우(예: onclick, readonly) 카멜기법으로 작성

  

  import './App.css';
  
  function App() {
    const title = '이것은 제목입니다.';
  
    return (
      <>
  	    <h1 className='title' style={{color: '#f00', fontSize: '3rem'}}>{title}</h1>
      </>
    )
  }
  
  export default App;
  

  HTML 속성	JSX 속성	설명
  class	className	HTML의 class는 JSX에서 className 사용
  for	htmlFor	<label> 태그에서 사용
  style	객체로 전달	{ color: 'red', fontSize: '16px' } 형식
  onclick	onClick	이벤트는 카멜기법으로 작성
  onchange	onChange	input, select 등
  checked	checked	<input type="checkbox" /> 에서 사용
  readonly	readOnly	readOnly로 작성
  maxlength	maxLength	input의 최대 글자 수
  tabindex	tabIndex	키보드 포커스 순서 지정
  contenteditable	contentEditable	텍스트 편집 가능 여부
  autocomplete	autoComplete	자동완성 on/off