#3. JSX 문법

2023.03.31

✔ React에서 component를 표시할 때 함수로 만듦
✔ 함수의 이름은 App 이라는 대문자로 시작
✔ React가 component를 인식하기 위해서는 return할때 JSX 문법 사용
✔ JSX는 HTML처럼 사용

1. 주의사항

1. React에서 JSX를 반환할 때는 꼭 하나의 태그만 반환 가능

✔ 만약 다수의 태그를 반환하고 싶다면 빈 태그 or div 태그 이용해서 부모 태그로 묶어서 반환

function App(){
  return(
  <>
  	<h1>hello</h1>
  	<h2>bye</h2>
  <>);
}

2. 클래스는 className으로 사용

✔ html -> class, React -> className

// javascript
function App(){
  return(
  <>
  	<h1 className="orange">hello</h1>
  	<h2>bye</h2>
  <>);
}

// css
.orange{
	color: orange;
}

3. JSX에 자바스크립트 코드를 작성할 때는 {} 삽입