[React] JSX

React의 컴포넌트를 만드는데 사용하는 문법

let test = "테스트";

return (
	<div className="app">
		<h2>{text}</h2>
		<h2>{1 + 2}</h2>
		<b>{number % 2 === 0 ? "짝수" : "홀수"}</b>
	</div>
);

위 코드와 같이 { } 를 이용해 변수나 데이터를 넣을 수 있음.

{func()} 처럼 함수를 호출할 수도 있으나 숫자나 문자열 처럼 화면에 표시할 수 있는 데이터 타입을 return

해주면 화면에 해당 값을 뿌려주지만 그렇지 않은 경우 화면에는 아무것도 나타나지 않는다.

닫힘 규칙

• 여는 태그가 있으면 반드시 닫는 태그도 있어야한다

최상위 태그 규칙

• 취상위 태그 : 컴포넌트 최상위에 위치한 태그
• JSX로 컴포넌트를 만드려면 반드시 최상위 태그로 다른 태그들을 묶어줘야한다
• 최상위 태그로 묶고 싶지 않다면 react fragment로 대체할 수 있음
  • <React.Fragment></React.Fragment>
    • 이를 위해서는 import React from "react"; 임포트 구문이 필요함