노마드 코더 리액트 (~ #2.6 JSX)

# 2 THE BASICS OF REACT

JSX

JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아닙니다.

React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법

기본적으로 react 요소(element)를 만들수 있게 해준다. 근데 html과 흡사한 문법을 사용한다 

브라우저가 jsx를 이해할수 있게 Babel을 설치를 해주어야 한다 
Babel 은 코드를 변환해주는 것인데 jsx로 적은 코드를 브라우저가 이해할수 있는 형태로 바꿔준다.

React에서는 JSX를 이용해서  DOM 코드보다 명시적으로 코드를 작성할 수 있다.

JavaScript 문법과 HTML 문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있는데 이렇게 적은 코드셋을 

컴포넌트라고 한다 알고보니 JSX는 내가 알게 모르게 써왔던 것이었다...

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

<div className='great'>Hi</div>

JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다. 중괄호를 사용하지 않으면 일반 텍스트로 인식함.

컴포넌트의 첫글자는 반드시 대문자여야 한다 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다.

React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용하는데

map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 함.

"key" JSX 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시된다.

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React via npm." },
];

function Blog() {
  
  const blogs = posts.map((post) => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));
  return <div className="post-wrapper">{blogs}</div>;
}