알기 쉽게 정리한 JSX란?

 

JSX란?

• JavaScript에 HTML 태그를 끼얹은 문법
• HTML 태그 안에선 중괄호({})를 사용해서 JS를 쓸 수 있다.
• JavaScript의 공식 문법이 아니며, JavaScript의 확장 문법이다.

아래와 같이 JavaScript 문법 (const title)에
HTML (<h1>) 태그를 끼얹은 JavaScript의 확장 문법입니다.

const count = 1;
const title = <h1>{count}번째 게시물</h1>

 

---

리액트 엘리먼트란?

 
예시 코드

const count = 1;
const title = <h1>{count}번째 게시물</h1>

 
위 title 변수에 담은 <h1> 태그는 리액트 엘리먼트라고 부릅니다.
 
즉, 리액트에서 UI를 렌더링 하기 위한 가장 작은 단위입니다.
 
참고로  브라우저는 JSX 문법을 알지 못합니다.
그렇기 때문에 아래 코드에서 1번 JSX 문법의 코드를 React 내부에 있는 Babel 통하여 2번 JavaScript 코드로 변환 시켜줍니다.

정말 알기 쉽게 정리한 Babel이란?

// 1. JSX
return <h1>Hello</h1>

// 2. JavaScript
return React.createElement('h1', null, 'Hello')

 

 

---

JSX를 사용하는 이유?

• 가독성 향상
• 선언적 프로그래밍
• React 엘리먼트를 빠르게 생성하기 위해 React에서 권장하는 문법
• => 백문이 불여일견 아래 코드들을 보며 이해합시다.

 

---

JavaScript와 JSX 비교 코드

• 아래 2가지 코드는 <div> 태그 안에 <h1> 태그를 생성하는 동일한 코드입니다.
• 하지만 JSX를 사용해서 작성한 코드의 양이 적고 직관적임을 알 수 있습니다.

app.js

function createElement() {
  const div = document.createElement('div'); //DOM을 생성하는 부분
  const h1 = document.createElement('h1'); //DOM을 생성하는 부분
  h1.textContent = "Hello, World!";
  div.appendChild(h1); //DOM을 수정하는 부분
  return div;
}

• 기본적으로 브라우저는 DOM을 이용하여 화면을 그려줍니다.
• 즉, DOM을 수동으로 생성하고 수정하는 부분에서 코드의 중복이 발생합니다.

 
app.jsx

function CreateElement() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

• app.js에서 DOM을 선언하는 코드의 중복들이 제거되었습니다.
• 즉, 가독성 뿐만이 아니라 선언적인 코드의 중복 제거가 되었지만 선언적인 프로그래밍이 가능해졌습니다.

 

---

3항 연산자 코드

• 아래 코드는 isOpen(열린 상태)이면 <div> 태그를 렌더링 하는 코드입니다.
• 한 줄의 코드로 매우 쉽게 코드를 작성할 수 있습니다.

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div>
      {isOpen && <div>isOpen이면 화면을 그려줘!</div>}
    </div>
  );
}

 

---

React 리스트 엘리먼트

• 아래 코드는 map을 통하여 item 배열을 순회하여 <li> 태그를 렌더링 하는 코드입니다.
• 반복적인 React 엘리먼트를 한 줄의 코드로 매우 쉽게 작성할 수 있습니다.

function App() {
  const items = ['리액트', '뷰', '앵귤러'];

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

 

---

정리

• JSX = JS + HTML
• JSX를 사용하는 이유는 코드의 가독성 향상과 선언적 프로그래밍이 가능하기 때문에 React에서 권장하는 문법이기 때문이다.

 

---

참고

• https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B8%B0%EC%B4%88/dashboard

만들면서 배우는 리액트 : 기초 강의 | 진유림 - 인프런