react - JSX 문법

React JSX

React에서 컴포넌트를 만들때에는 함수로 만들수 있습니다.
이 때 함수의 네이밍은 첫글자는 대문자로 만들어야합니다.

function App() {}

그리고 return의 값으로는 JSX문법을 반환해야하고 하나의 태그만 반환할 수 있습니다.
텅텅빈 태그를 감싸는 역할로 사용가능합니다.

return (
  <>
  	<h1>안녕하세요</h1>
  	<p>반갑습니다</p>
  </>
  )

JSX

JSX란 Javascript 로 이루어진 XML 양식입니다.
특징으로는 HTML의 모든태그 사용가능합니다.
JSX 에서 자바스크립트코드를 작성하고 싶다면 { } 중괄호 안에 명시해야 합니다.

<p>{name}</p>
<p style={{width: '200px', height: '200px'}}>반갑습니다</p>

기존 HTML 에서의 class를 사용하려면 class 대신 className을 사용합니다.

<p className='orange'>안녕하세요</p>