[React] .js vs .jsx 차이점

 

오늘의 단어는 js와 jsx이다.
사실 jsx를 소개하기 위해 js도 오늘의 단어에 추가했다.
React를 본격적으로 공부하면서 Javascript 파일을 생성할 때, 확장자가 .js 인 경우도 있고, .jsx 인 경우도 있었다.
처음에는 큰 차이가 없어 보여서 보편적인 .js를 사용하여 코딩했었는데, 각 기능에 대해 알아야 필요시 제대로 활용할 수 있을 것 같아 정리해두었다.

 

💭요약!
: JS는 표준 자바스크립트를 뜻하고, JSX는 사용자가 리액트를 사용해 좀 더 직관적으로 컴포넌트를 만들 수 있는  HTML식 문법이다.

 

👩🏻‍💻 JSX란?

- Javascript XML의 약어
- 쉽게말해 jsx는 JavaScript 확장 문법
- js보다 jsx를 쓰는 이유는 보통 자바스크립트 내에 HTML을 사용할 수 있기 때문
- JSX를 “babel”로 컴파일 하면 React 표준 문법인  javascript로 자동 변환이 됨.
- 둘의 기능 차이는 크게 없으므로 쓰기 나름이고, React 공식 문서에서는 “필수는 아니지만 추천” 이라고 나와 있음.

 

📓JS vs JSX 코드 비교

1. JS

// .js
function greet(name) {
  return "Hello, " + name + "!";
}

console.log(greet("John"));

 

위의 코드는 일반 JavaScript 파일(.js)이며, 함수를 사용하여 문자열을 생성하고 콘솔에 출력한다. 두 번째는 React 컴포넌트를 사용하는 JSX 파일(.jsx)이며, Greeting 컴포넌트를 선언하고 ReactDOM.render를 사용하여 컴포넌트를 렌더링합니다. 이렇게 .js와 .jsx 파일은 서로 다른 확장자를 가지고 있고, React의 JSX 문법을 사용할 수 있게 되는 차이점이 있습니다.

 

2. JSX

// .jsx
function Greeting({ name }) {
  return <div>Hello, {name}!</div>;
}

ReactDOM.render(<Greeting name="John" />, document.getElementById("root"));

 

이 코드는 React 컴포넌트를 사용하는 JSX 파일(.jsx)이며, Greeting 컴포넌트를 선언하고 ReactDOM.render를 사용하여 컴포넌트를 렌더링한다.

 

이렇게 .js와 .jsx 파일은 서로 다른 확장자를 가지고 있고, React의 JSX 문법을 사용할 수 있게 되는 차이점이 있다.

 

 

💭JSX 문법

: 일단 js와 jsx는 문법에서 약간의 차이가 있으므로, js 사용 시 주의해야 하는 문법을 몇 가지 소개하겠다.

1. 표현식 사용

: 대부분의 javascript 표현식은 모두 구현이 가능하나, 표현식은 {}로 감싸서 나타내야 한다

const name = 'John';
const element = <div>Hello, {name}!</div>;

위의 예시에서 name 변수는 JSX 표현식 안에서 중괄호 {}로 감싸져 있다. JSX에서 중괄호로 감싸진 부분은 JavaScript 표현식으로 간주되며, 해당 표현식의 결과값이 JSX에 삽입된다.

2. 클래스 이름과 스타일

: JSX에서 클래스 이름을 지정할 때 class 대신 className을 사용해야 한다. 또한 인라인 스타일을 지정할 때 객체 형태로 작성해야 한다.

const element = <div className="container" style={{ color: 'blue', fontSize: '16px' }}>Hello, JSX!</div>;

 

3. 조건부 랜더링

: 조건부로 요소를 렌더링할 때, 삼항 연산자나 논리 연산자를 사용할 수 있다.

const isLoggedIn = true;
const element = isLoggedIn ? <div>Welcome, User!</div> : <div>Please log in.</div>;

 

3. 주석

:  JSX 안에서 주석을 작성할 때는 중괄호 안에 주석을 작성해야 한다.

const element = (
  <div>
    {/* 이것은 주석입니다. */}
    <p>Hello, JSX!</p>
  </div>
);

 

 

이외에도 몇 가지 문법 사항들이 있지만, 간단한 것만 몇 개 소개해보았다. 더 많은 정보를 얻으려면 React 공식 문서를 참고하길 바란다. 이런 식으로 위와 같은 문법을 지켜 JSX를 작성하면 정상적으로 렌더링되고 실행되는 React 애플리케이션을 만들 수 있다.

 

 

 

* / 참고 /*

babel 컴파일러 사용법도 간단히 적어두면 좋을것 같아 첨부한다.ㅂ적어두면 좋을것 같아 첨부한다. 

 

* JSX를 Babel 컴파일러로 적용하는 방법

 

1. Node.js와 npm 설치

2, 프로젝트 디렉토리 생성 및 npm 프로젝트를 초기화

npm init -y

3. Babel 및 JSX 관련 패키지 설치

npm install @babel/core @babel/cli @babel/preset-react --save-dev

4. 프로젝트 루트에 babel.config.json 파일을 생성하고, 다음과 같이 설정을 추정.

{
  "presets": ["@babel/preset-react"]
}

5. JSX로 작성된 파일을 컴파일하여 일반 JavaScript 파일로 변환. (Babel CLI를 사용하여 아래와 같이 컴파일 가능)

npx babel src --out-dir dist

위의 명령어에서 src는 JSX 파일이 있는 디렉토리, dist는 컴파일된 JavaScript 파일이 생성될 디렉토리를 나타낸다. 

 

 

* JSX 코드에 추가해야 될 코드

 

1. React와 ReactDOM 모듈을 import

import React from 'react';
import ReactDOM from 'react-dom';

2. JSX 문법으로 작성된 컴포넌트를 작성

3. JSX 컴포넌트를 실제로 렌더링해야 함. 이를 위해 ReactDOM.render() 함수를 사용

ReactDOM.render(<YourComponent />, document.getElementById('root'));

여기서 <YourComponent />은 JSX로 작성된 컴포넌트를 넣어주면 됨.

document.getElementById('root')는 컴포넌트가 렌더링될 DOM 요소의 ID를 나타냅니다. 이 요소는 프로젝트의 HTML 파일에서 정의되어 있어야 함.

 

이렇게 컴파일된 파일들은 브라우저에서 실행할 수 있는 일반 JavaScript 코드로 변환된다.