JSX

JSX 는 JavaScript XML 의 줄임말입니다

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법입니다

Babel

Babel 은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 합니다

그러면 브라우저가 JavaScript를 읽고 화면에 렌더링 할 수있습니다

DOM

규칙

JSX에서 여러 엘리먼트를 작성할때는 하나의 태그로 감싸줘야합니다

아래와 같은 빈태그를 프래그먼트라고 합니다

또 다른 규칙들을 아래 예시에 적어보겠습니다

function Example() { // 컴포넌트 앞글자는 무조건 대문자로!(PascalCase)

	return (
		<>
			<div className='클래스는 클래스네임으로!'></div>
			<div>{자바스크립트 표현식 사용은 꼭 중괄호를 써서 사용}</div>
			<div>{조건부렌더링시 ? 삼항연산자를 사용하래요 : 왜인지는 모름}</div>
		</>
	)
}

map() 함수

여러 개의 HTML 엘리먼트를 표시할때는 map() 을 사용합니다

사용할때 반드시 key JSX 속성을 넣어야합니다

넣지 않으면 리스트의 각 항목에 key를 넣으라는 에러가 표시됩니다

그땐 map 메소드 내부에 있는 첫 엘리먼트에 넣어주면 됩니다

function github() {
	const grass = nothing.map((nothing) => 
		<div key={nothing.id}>
			<span>{nothing.name}</span>
			<div>{nothing.why}</div>
		</div>
	);
}