JSX 규칙 알아보기

JSX

• JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장 문법이다.
• JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

ClassName

React에서 CSS class 속성을 지정하려면
"ClassName"으로 표기해야 한다.

<div className = 'test'>hello!</div>

🦖class 속성을 지정하면?
React에서는 html 클래스 속성 대신 자바스크립트 클래스로 받아들인다!

중괄호

JSX에서 자바스크립트를 쓰려면 꼭 중괄호를 써야한다!

function test() {
	const name = 'miri';
  
  	return (
    	<div>
      		hello,{name} //중괄호 사용
      	</div>
    )
}

대문자로 시작

React 엘리먼트가 JSX로 작성되면 대문자 로 시작해야한다.
대문자로 작성된 JSX컴포넌트는 사용자 정의 컴포넌트라고 부른다.

🦖소문자로 시작하게 되면?
일반적인 HTML 엘리먼트로 인식하게된다.

삼항연산자

조건부 렌더링은 if문 XX 삼항연산자를 사용한다.

<div>
  {
   (1+1 === 2 ? (<p>pass</p>) : (<p>fail</p>)
	}  
</div>

map() 함수

React에서 여러 개의 HTML 엘리먼트를 표시할 땐 map() 함수를 사용한다.

• map 함수 사용할 때 반드시 "key"JSX 속성을 넣어야 한다!

function Shoppingmall(){
	const content = posts.map((post) =>
    <div> key ={post.id}>
   		<h3>{post.title}</h3>
    	<h3>{post.content}</h3>
    </div>                    
 );
  return (
  	<div>
    	{content}
    </div>
  );
}