JSX

JSX

• JS의 확장문법
• JS와 HTML을 혼합하여 사용할 수 있음

JSX 문법

1. JSX에서는 꼭 닫는 태그가 있어야 한다.

• <div></div>, <h1></h1>
• <a /> <image />, <br /> 와 같은 self-closing-teg 등 html에서는 닫힘태그가 필요 없던 태그들도 꼭 닫아줘야함

2. 최상위태그 규칙

• JSX의 표현식에서는 반드시 하나의 부모태그를 가지고 있어야 함 = 하나의 최상위태그로 다른 모든 태그를 묶어줘야함
• 만약, 최상위태그를 사용하고 싶지 않다면 react.Fragment라는 기능 이용
  - import React from 'react';로 리액트 불러와서 사용
  -
  위 코드와 같이 <React.Fragment> 태그를 최상위 태그로 사용하여, 다른 태그들을 감싸서 사용
  • 또는, <></> 와 같이 빈 태그를 만들어서 사용 가능

JSX와 CSS의 사용

css 파일에서 스타일 적용

• class는 JS 예약어이기 때문에 사용할 수 없음
• className 사용하여 엘리먼트에 클래스 지정

inline 스타일 적용

• App() 함수 내에 style 객체를 생성하여 각 엘리먼트에서 스타일 객체에 접근하여 스타일 지정 가능

JSX의 값 사용

JSX는 {}를 사용해서 다양한 값들은 html과 함께 사용할 수 있음

• JS의 변수, 값 포함 가능
• 표현식 표시 가능
• 문자열 표시 가능
• 함수 호출 가능
• 단, 숫자나 문자가 아닌 boolean, 배열 등을 넣으면 화면에 표시 안됨
• 조건부 랜더링 가능
  - 삼항연산자를 이용하여 조건에 맞는 다른 화면 랜더링 가능

결과화면