JSX

# JSX (javascript XML)

- javascript XML의 줄임말로 문자열도 아니고 html도 아니다
- 리액트에서 UI를 구성할때 사용하는 문법으로 javascript를 확장한 문법이다
- JSX는 자바스크립트가 확장된 문법이지만, 브라우저가 바로 실행할수있는 자바스크립트 코드가 아니다.
그래서 브라우저가 이해할수있는 자바스크립트 코드로 변환을 해주어야한다. 이때 이용하는것이 "Babel"이다.
babel은 jsx를 브라우저가 이해할수있는 자바스크립트로 컴파일한다.(babel이 알아서 JSX코드를 변환해준다)
컴파일후 자바스크립트를 브라우저가 읽고 화면에 렌더링할수있다
- 자바스크립트 문법과 html문법을 동시에 이용해 기능과 구조를 한눈에 확인할수있다. 
이렇게 구조와 동작에 대한 코드를 한뭉치로 적은 코드셋을 컴포넌트라고 한다.
- jsx없이도 react요소를 만들수있지만, 코드가 복잡하고 가독성이 떨어지는 단점이 있다.

-html과 비슷한 문법을 활용하기 때문에 디자이너와의 협업에 편리하다

-jsx를 쓰지않아도 react를 사용할수있지만 단점들이 있어서 jsx사용하는거다!
-jsx는 마크업과 로직을 분리하지 않고 UI를 만들수있다.

 

DOM코드

function formatName(user) {
  return user.firstName + " " + user.lastName;
}
const heading = document.createElement("h1");
heading.textContent = `Hello, ${formatName(user)}`;
document.body.appendChild(heading);

JSX 없이 활용한 React


function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  return React.createElement("h1", null, `Hello, ${formatName(user)}!`);
}

 JSX 를 활용한 React
 
 
 function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
   return <h1>Hello, {formatName(user)}!</h1>;
}

---

JSX규칙

1. 하나의 엘리먼트 안에 모든 엘리먼트가 포함

여러엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야한다.

<div>
<div>
<h1>hello</h1>
</div>
<div>
<h2>World</h2>
</div>
</div>

2. 엘리먼트 클래스 사용시 className으로 표기.

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

3. 자바스크립트 표현식 사용시 중괄호{} 이용

중괄호 이용하지않으면 일반텍스트로 인식한다!

 

function App() {
const name = 'Josh Perez';
return (
<div>
Hello, {name}!        //여기의 name부분 말한다!!
</div>
);
}

4. 사용자 정의 컴포넌트는 대문자로 시작

react 엘리먼트가 JSX로 작성되면 대문자로 시작해야한다. 소문자로 시작하게되면 일반적인 HTML엘리먼트로 인식을 하게된다. 이렇게 대문자로 작성된 JSX컴포넌트를 따로 사용자 정의 컴포넌트라고 부른다.

function Hello() {     //여기의 Hello부분말한다!
return <div>Hello!</div>; }
function HelloWorld() {
return <Hello />; }    //여기의 Hello부분말한다!

 5.조건부렌더링은 if문이 아닌 삼항연산자를 사용

삼항연산자에 한쪽에 쓸내용이 없으면 null쓰면된

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

6.여러개의 HTML엘리먼트를 표시할때, map()함수를 이용

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

(key속성값은 가능하면 데이터에서 제공하는 id를 할당해야한다)

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

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