JSX

JSX란?

• JavaScript XML 의 줄임말로 문자열도 아니고 HTML도 아니다
• React 에서 Ul를 구성할 때 사용하기 위해 JavaScript를 확장한 문법으로 React 엘리먼트 만들기가 가능하다

JSX 를 브라우저에서 실행하기 위해서는

• Babel을 이용하여 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 한다.
• 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링된다.

DOM and React JSX

• React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것
• DOM에서는 리액트 사용을 지양한다.

JSX 규칙

• JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 한다.
• React에서 CSS class 속성을 지정하려면 className 으로 표기
  • class로 작성하면 React에서 html 클래스 속성 대신 자바스크립트 클래스로 받아들인다.
• JavaScript 표현식 사용시, 중괄호({})사용
  • 중괄호를 사용하지 않으면 일반 텍스트로 인식
  • 중괄호({}) 를 묶으면 function () {}와 같다
  • 소괄호(())로 묶으면 () 안의 값이 return값
• 사용자 정의 컴포넌트는 대문자로 시작(PascalCase)
  • 소문자로 시작하면 일반적인 HTMl 엘리먼트로 인식
• 조건부 렌더링에는 삼항연산자 사용 (if문X)

  <div>
  	{
  		(1+1 === 2) ? (<p>정답</p> : (<p>탈락</p>
  	}
  </div>

• 여러 개의 HTMl 엘리먼트를 표시할 때, map() 함수를 이용
  • 반드시 key JSP 속성을 넣어줘야 함
• 두개 이상의 형제 엘리먼트를 작성할 경우 한개의 부모 엘리먼트로 감싸줘야함