JSX 규칙

jsx 는 자바스크립트 xml을 추가 확장한 문법입니다.

브라우저에서 실행되기전에 바벨을 사용해 일반 자바스크립트 형태의 코드로 자동 변환됩니다.

리액트에서 쓰이는 jsx는 하나의 파일에서 자바스크립트와 html을 동시에 작성할수 있기 때문에 가독성이 높고 작성하기 편한 장점이 있다.

JSX 문법에서는 부모용소 하나가 무조건 감싸줘야하는데

funntion App() {
  return(
    <div>
    
    <div>hi</div>
    <div>nice to meet you!</div>
    
    </div>

이런식으로 사용하고자 하는 태그들을 무조건 감싸줘야 작동하게 됩니다.

2. 자바스크립트 표현식

JSX안에서도 자바스크립트 표현식을 사용할 수 있는데
단, 조건이 하나 있습니다 무조건 { } 중괄호로 감싸줘야 사용할수있습니다.

function App() {
	const name = 'HUni';
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div>
		</div>
	);
}

3. if 문 대신 삼항 연산자 사용

JSX에서는 if 구문과 for 반복문을 사용할 수 없기 때문에

외부에서 사용하거나 {}안에서 삼항 연산자를 사용하는 방법을 주로 이용합니다.

4. 카멜 표기법 사용

react 는 camelCase 프로퍼티 명명 규칙을 사용합니다.