React | JSX

JSX (JavaScript XML)

JavsScript를 확장한 문법

• JavaScirpt + XML/HTML을 합친 것이라고 볼 수 있음
• React에서는 JSX를 이용하여 화면에 UI를 나타냄
• JSX를 사용하면 하나의 파일에 HTML구조와 JS를 함께 사용할 수 있다
  • 기존에는 .html 파일과 .js 파일로 구분하여 작성해 왔음
• 브라우저에서 실행하기 전 Babel을 사용하여 일반 JS형식의 코드로 변환 됨

// JSX 문법
function App() {
	return (
		<h1>안녕하세요</h1>
	);
}

// JSX를 사용하지 않는 코드
function App() {
	return React.createElement("h1", null, "안녕하세요");
}

• createElement() : JSX코드를 JS 코드로 변환하는 역할을 해주는 함수

 

React에서 사용되는 JavaScript의 확장 문법, HTML과 유사한 형태로 JavaScript 코드 작성가능

-> 형태는 HTML, 언어는 JavaScript

 

JSX 문법

return 문 안에 HTML 형태로 작성

• 두 줄 이상 작성할 경우 ()소괄호로 묶음

// return문 안 HTML형태로 코드 작성
function App() {
	return <div> 안녕하세요 </div>
}

// 두줄 이상 () 소괄호 작성
function App() {
	return (
		<div>
			<h1>안녕하세요</h1>
			<h2>권여진입니다</h2>
		</div>
	);
}

 

하나의 최상위 요소(부모 요소)로 묶어줘야 함

• 코드가 한 줄인 경우, 부모 요소로 감싸지 않아도 정상 작동함
• 코드가 여러 줄인 경우, 부모 요소로 감싸지 않으면 에러 발생
  • <div>를 사용하여 감싸는 방법
  • 마크업에 <div>를 추가하고 싶지 않은 경우 <> </>(Fragment)를 사용할 수 있음

// 정상적으로 동작하는 코드
function App() {
	return (
		<div> 안녕하세요 </div>
	);
}

// 정상적으로 동작하는 코드
function App() {
	return (
		<div>  {/* <div>태그로 감싸줌 */}
			<h1>안녕하세요</h1>
			<h2>권여진입니다</h2>
		</div>
	);
}

// 꼭 div태그가 아니고 빈 태그(Fragment)여도 감싸주기만 한다면 가능
function App() {
	return (
		<>     {/* Fragment로 감싸줌  */}
			<h1>안녕하세요</h1>
			<h2>권여진입니다</h2>
		</>
	);
}

// 에러가 발생하는 코드
function App() {
	return ( {/* 부모요소로 감싸주지 않은 형태 */}
			<h1>안녕하세요</h1>
			<h2>권여진입니다</h2>
	);
}

 

Fragment

Fragment(<></>)는 브라우저상의 HTML 트리 구조에서 흔적을 남지기 않고 그룹화 해줌

 

{} 중괄호를 사용해 JS코드 작성 

JSX 내부에서 코드를 중괄호{}로 감싸면 JS 표현식을 사용할 수 있음

function App() {
	const name = '권여진'; // JavaScript 표현식
	return (
		<div>
			<p>Hello</p>
			<p>{name}</p>
		</div>
	);
}

 

JSX에서는 class가 아닌 className을 사용

<!-- 기존 HTML 문서 -->
<div class="main">안녕하세요</div>

// JSX
<div className="main">안녕하세요</div>

 

모든 태그를 닫아야 함

JSX에서는 태그를 명시적으로 닫아야 함

<img> 태그와 같이 자체적으로 닫는 태그도 반드시 <img/>로 작성해야 함

<>
  <img
    src="http://abc.jpg"
    alt="image"
  />
  <ul>
    <li> red </li>
    <li> orange </li>
    <li> yellow </li>
  </ul>
</>

 

---

ESLint 확장팩 (추천)

 

마이크로소프트에서 제공하는 자바스크립트 문법에러를 잡아주는 역할을 해주는 모듈

Vite를 통해 리액트 프로젝트를 생성했다면 .eslintrc.cjs라는 ESLint관련 설정이 되어있는 파일을 발견할 수 있음

 

package.json에도 "devDependencies"에 관련 모듈이 설치되어 있다는 것을 확인 할 수 있다!

 

 

CRA방식으로 프로젝트를 생성했다면 확장팩을 다운 받는 것만으로 적용이 되지 않음으로 직접 넣어주면 됨

vite 파일 구조

 

- .eslintrc.cjs 파일 생성 후 아래 내용 삽입

import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'

export default [
  { ignores: ['dist'] },
  {
    files: ['**/*.{js,jsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    settings: { react: { version: '18.3' } },
    plugins: {
      react,
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...js.configs.recommended.rules,
      ...react.configs.recommended.rules,
      ...react.configs['jsx-runtime'].rules,
      ...reactHooks.configs.recommended.rules,
      'react/jsx-no-target-blank': 'off',
      'react-refresh/only-export-components': [
        'warn',
        { allowConstantExport: true },
      ],
    },
  },
]

 

- package.json 파일내의 devDependencies 안에 아래 내용 삽입

"eslint": "^9.11.1",
"eslint-plugin-react": "^7.37.0",
"eslint-plugin-react-hooks": "^5.1.0-rc.0",
"eslint-plugin-react-refresh": "^0.4.12"

 

---

JSX 공식문서 참고

JSX 소개 – React

 

- React에서 JSX는 필수가 아님 이에 대해 자세히 알아보려면 아래 문서 참조

JSX 없이 사용하는 React – React