JSX

2023. 5. 17. 15:07·React

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다.
이번에는 React가 더욱 편리할 수 있게 도와주는 JSX에 대해서 알아보겠습니다.

 

 

이전 학습내용 

React의 특징과 장점, 적용 예제까지!

https://sugarsyrup.tistory.com/entry/React%EB%A5%BC-%EC%84%A0%ED%83%9D%ED%95%9C-%EC%9D%B4%EC%9C%A0%EC%99%80-HTML%EC%97%90-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

 

 

개요

이전 아티클에서 HTML에서 React와 ReactDOM을 불러와서, React.createElement를 활용해 웹페이지를 구성하는 방법을 알아봤습니다. createElement보다 편리한 방식으로 JSX를 사용할 수 있습니다. 아래 JSX 예제 코드를 미리 보여주며 JSX에 대한 설명을 시작해 보겠습니다.

const Title = <h3 id:"title" onMouseEnter={() => {console.log('mouse enter')}>Hello World</h3>

 

JSX

JavaScript를 확장한 문법으로 UI가 어떻게 생겨야 하는지 설명하며, React Element를 생성합니다. 위 예제 코드를 통해 보이듯, HTML에서 사용하는 문법과 아주 흡사한 방법으로 작성할 수 있어 개발자로 하여금 React Element를 만드는데 편의를 제공해 줍니다. 이 방식은 createElement 방식에 비해 쉽게 사용할 수 있을 것입니다.

해당 코드를 HTML의 script 내부에서 React와 ReactDOM만 import 하고 실행한다면? 분명 에러가 발생할 것입니다. JSX는 JavaScript의 기본 문법이 아니고 import 한 두 라이브러리에 내용이 없기 때문이죠. 이러한 문제를 해결하기 위해 React 공식문서에서는 babel을 활용하는 것을 권장합니다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js" ></script>
<script type="text/babel">
	const element = <h1>Hello, world!</h1>;
</script>

 

 

babel

자바스크립트 컴파일러

인터프리터 언어인 자바스크립트에서 컴파일러가 불필요합니다. 하지만 위 상황처럼 JSX라는 문법방식을 Javascript 파일에 작성하게 되면 Javascript에서 공식적으로 지원하는 문법이 아니기에 해석을 할 수 없습니다. babel은 컴파일러로 Javascript가 실행되기 이전, JSX와 같은 코드들을 Javascript 엔진이 이해할 수 있는 문법으로 바꿔서 실행될 수 있게 도와주는 역할을 합니다.

 

 

JSX 예제

const Title = React.createElement("h3",
	{
    	id:"title",
    	onMouseEnter={() => {console.log('mouse enter')}
    },
   	"Hello World"
   )
const Title = <h3 id="title" onMouseEnter={() => {console.log('mouse enter')}>Hello World</h3>

위 첫 번째 예제는 이전의 CreateElement를 활용한 방식, 아래는 JSX를 활용한 방식입니다. babel로 JSX코드를 번역하면 CreateElement에서 작성한 방식으로 유사하게 나오고 웹페이지에 나오는 결과에도 차이가 없지만, 코드를 보는 입장에서 시각적으로 더 도움이 됩니다.

 

 

JSX 특징

위 JSX 예제를 통해 알 수있 JSX도 표현식입니다.
Javascript 객체로 인식되어 if 구문 및 for loop 안에 사용이 가능하고, 변수에 할당하거나 인자로 받아들이고 함수로 반환하는 등의 기능이 가능합니다.

 

JSX는 HTML에서 사용하듯 key=value 방식으로 속성을 정의할 수 있습니다.
id, class 등 기존의 HTML 속성뿐 아니라, Javascript에서 지원하는 Event 또한 편리하게 정의할 수 있습니다. 여기서 주의해야 할 점은 HTML에서 속성을 작성하는 방식이 아닌 Javascript에서 사용하는 방식의 camelCase 명명 규칙으로 정의해야 합니다. (ex. class는 className, tabindex는 tabIndex)

 

또한 필요에 따라 Javascript 표현식을 삽입할 수 있습니다. 아래 예제처럼 중괄호를 사용하여 Javascript 표현식을 작성하여 정의할 수 있습니다.

const title = "Hello World!!";
const H1 = (<h1>{title}</h1>);

 

JSX로 HTML처럼 자식으로 정의됩니다.
아래 예제와 같이 태그가 비어있다면 />를 이용해 바로 닫아주거나, 필요에 따라 자식을 포함할 수 있습니다. 

const element = <img src={user.avatarUrl} />;

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

 

위 코드와 달리 JSX가 자식으로 JSX를 받고 싶다면, JSX를 함수형태로 만들어서 return 해주는 형태로 바뀌어야 합니다.

function Title() {
	return (
		<h3>Hello World</h3>
	);
}

const container = (
	<div> 
		<Title>
	<div>
)

위 방식으로 태그 안에 다른 JSX를 받아 올 수 있으나 또 한 가지 주의해야 할 점은, JSX 함수는 반드시 대문자로 시작해야 합니다! 함수를 소문자로 시작하는 이름을 명명하고 태그내부에서 불러오게 된다면, JSX는 해당 코드를 함수가 아닌 html 태그라고 착각하고 해석합니다. 전혀 다른 결과가 나올 수 있기 때문에 이 규칙을 반드시 지켜 함수를 정의해야 합니다.

 

다음 주제로는 리액트에서 지원하는 독특한 로직 useState에 대해 다루어 보겠습니다! 감사합니다

 

References

NomadCoders React 2장 : https://nomadcoders.co/react-for-beginners/lobby  
React 공식문서 JSX 없이 사용하는 React : https://ko.legacy.reactjs.org/docs/introducing-jsx.html

저작자표시 변경금지 (새창열림)

'React' 카테고리의 다른 글

[React, Typescript] Intersection Observer를 활용하여, 사용자 화면에 맞게 변화하는 컴포넌트 만들기  (1) 2024.05.14
useState 딥다이브  (0) 2023.06.04
React의 특징과 장점, 적용 예제 까지!  (0) 2023.05.16
Axios Custom Hook TypeScript 환경으로 만들기  (0) 2023.05.08
react-hook-form과 yup 라이브러리 적용 하기  (0) 2023.02.12
'React' 카테고리의 다른 글
  • [React, Typescript] Intersection Observer를 활용하여, 사용자 화면에 맞게 변화하는 컴포넌트 만들기
  • useState 딥다이브
  • React의 특징과 장점, 적용 예제 까지!
  • Axios Custom Hook TypeScript 환경으로 만들기
설탕시럽
설탕시럽
설탕시럽의 Web Tech Blog 입니다.
  • 설탕시럽
    SugarSyrup Tech Blog
    설탕시럽
  • 전체
    오늘
    어제
    • 분류 전체보기 (50)
      • HTML & CSS (2)
      • JavaScript (6)
      • React (17)
      • Node (1)
      • BackEnd (1)
      • 회고 (5)
        • 엄브렐라 개발일지 (1)
        • 인턴 회고!!! (2)
      • 컴퓨터 기초 (4)
        • 운영체제 (2)
        • SICP (1)
      • 코딩테스트 (10)
      • 짧은 글 (1)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    JS
    Element
    프론트엔드
    top-level await
    docker
    php
    EC2
    error
    SQL
    document
    level1
    CodingTest
    인턴
    리액트
    오블완
    TypeScript
    회고
    티스토리챌린지
    운영체제
    에러
    JavaScript
    배포
    AWS
    타입스크립트
    코딩테스트
    css
    프로그래머스
    React
    nginx
    자바스크립트
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
설탕시럽
JSX
상단으로

티스토리툴바