본문 바로가기
Frontend

[React] JSX란? 아주 쉽게 총 정리(+코드, 그림)

by 알기 쉬운 코딩 사전 2024. 10. 8.
반응형

 

📄 JSX란?

JavaScript에 HTML 태그를 끼얹은 문법

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

 

🖥️ 소스 코드로 이해하기

const count = 1;
const title = <h1>{count}번째 게시물</h1>
다음 코드는 title 이라는 변수에 <h1>{count}번째 게시물</h1>을 선언한 코드입니다.
즉, JavaScript 문법(const title)에 HTML 태그(<h1>)를 끼얹은 JavaScript의 확장 문법입니다.

 


 

📄 JSX의 특징

JSX에서 사용되는 태그의 속성 이름이 HTML과 조금 다름

  • class -> className
  • for -> htmlFor
  • onclick -> onCclick

태그를 명시적으로 닫아줘야 함
하나의 태그로 감싸져 있어야 함
 

🖥️ 소스 코드로 이해하기

// HTML
<button class="btn">Hello, world!</button>
<input type="text">

// JSX 문법
<div>
    <button className="btn">Hello, world!</button>
    <input type="text" />
</div>
다음 코드는 태그의 속성이 class가 아닌 className으로 사용되었으며,
/(슬래시, slash)를 통해서 태그를 닫아주었습니다.
또한, <div>태그를 통하여 하나의 태그로 감싸져 있습니다.

 


 

📄 JSX를 사용하는 이유?

  • 가독성 향상
  • 선언적 프로그래밍
  • React 엘리먼트를 빠르게 생성하기 위해 React에서 권장하는 문법

 

🖥️ 소스 코드로 이해하기

아래 두 코드는 <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을 선언하는 코드의 중복들이 제거되었습니다.
즉, 가독성 뿐만이 아니라 선언적인 코드의 중복 제거가 되었지만 선언적인 프로그래밍이 가능해졌습니다.

 


 

📄 리액트 엘리먼트(React Element)란?

리액트에서 UI를 렌더링 하기 위한 가장 작은 단위입니다.

 

🖥️ 소스 코드로 이해하기

const count = 1;
const title = <h1>{count}번째 게시물</h1>
 다음 코드에서 title 변수에 담은 <h1> 태그를 리액트 엘리먼트라고 부릅니다.

 

참고: 브라우저는 JSX 문법을 알지 못합니다.
그렇기 때문에 아래 코드에서 1번 JSX 문법의 코드를 React 내부에 있는 Babel 통하여 2번 JavaScript 코드로 변환 시켜줍니다.
// 1. JSX
return <h1>Hello</h1>

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

 

 


 

📄 리액트 리스트 엘리먼트(React List Element)란?

  • 아래 코드는 map을 통하여 item 배열을 순회하여 <li> 태그를 렌더링 하는 코드입니다.
  • 반복적인 React 엘리먼트를 한 줄의 코드로 매우 쉽게 작성할 수 있습니다.
function App() {
  const items = ['리액트', '뷰', '앵귤러'];

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

 


 

📄 3항 연산자 코드

  • 아래 코드는 isOpen(열린 상태)이면 <div> 태그를 렌더링 하는 코드입니다.
  • 한 줄의 코드로 매우 쉽게 코드를 작성할 수 있습니다.
function App() {
  const [isOpen, setIsOpen] = useState(false);

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

 


 

📝 정리

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

 


 

참고

 

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

진유림 | 리액트를 가장 쉽고 빠르게 배울 수 있는 리액트 입문 강의입니다. 토이 프로젝트를 만들면서 개념과 실전 감각을 익히고 배포까지 3시간 만에 완성하는 알짜 강의! 초급, 중급, 고급으

www.inflearn.com

 
 

반응형

댓글