[React] JSX - 정의, 꼭 알아야 하는 문법

🔎 드디어 중요하고 듣던 React 학습이 시작되었다. 오늘은 React에서 사용하는 JSX란 무엇이며, 꼭 알아야 하는 문법에 대해 정리하며 복습해보고자 한다.

✔️ JSX란

→ JSX는 React에서 UI를 구성할 때 사용하는 문법으로, JavaScript를 확장한 문법이다.이 문법을 이용해서 React 엘리먼트를 만들 수 있는 것이다.

"그럼 왜 React 요소를 JSX를 이용해서 만드는 것일까?"
→ JSX를 이용하면 명시적으로 코드를 작성 할 수 있기 때문이다.
JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.

✔️ JSX, 꼭 알아야 하는 문법

1. 여러 엘리먼트를 작성하고자 하는 경우,
   최상위에서 opening tag와 closing tag로 감싸주어야 한다.
   → return() 안에는 병렬로 태그 2개 이상 기입 금지

<div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h1>World</h1>
  </div>
</div>

2. class 넣을 땐, className 으로!
   CSS class 속성을 지정하려면 "className"으로 표기해야 한다.

   <div className = "greeting">Hello!</div>

3. 변수를 넣을 땐(데이터 바인딩), {중괄호}
   JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다.

function App(){
	let name = 'fejigu';
return (
	<div>
	Hello,{name}
	</div>
);
}

4. React 엘리먼트는 대문자로 시작
   이것을 사용자 정의 컴포넌트라고 부른다.

function Hello(){
	return <div>Hello!</div>
}
function HelloWorld(){
	return <Hello />
}

5. 조건부 렌더링은 if문 사용 불가능
   삼항 연사자를 이용해야 한다.

<div>
{
	(1+1 === 2) ? (<p>정답</p>) : (<p>탈락<p>)
}
</div>

6. 여러 개의 엘리먼트를 표시할 때는,
   "map()" 함수를 사용하기
   map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.

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

7. style 넣을 땐,
   style = { {스타일명 : '값'} }

return (
	<div className="App">
    <h4 style={{ color : black }}>BLOG</h4>
    </div>
)