React - JSX란?

JSX란?

---

JSX는Javascript를 확장한 문법

하나의 파일에 javascript와 html(xml)을 동시에 작성하여 js 코드 안에서 UI 관련 작업이 가능하기 때문에 시각적으로 도움이 된다.
또한, JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고메시지를 표시할 수 있게 해준다.

JSX 문법

---

변수를 사용할 때, {}를 사용(자바스크립트 표현식)

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

const x = 10;
const y = 20;
const element = <p>The sum of {x} and {y} is {x + y}.</p>;

html안에 스타일 지정할 때는 style - {{style}}

const myStyle = {
  color: 'blue',
  backgroundColor: 'lightgray',
  fontSize: '20px'
};

const element = <p style={myStyle}>Styled paragraph</p>;

반드시 부모 요소 하나가 감싸는 형태

Virtual DOM에서 컴포넌트 변화를 감지할 때 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

div

import React from 'react';

const MyComponent = () => {
  return (
    <div>
      <div style={{ backgroundColor: 'red' }}>First div</div>
      <div style={{ backgroundColor: 'blue' }}>Second div</div>
    </div>
  );
};

export default MyComponent;

빈 괄호 활용

import React from 'react';

const MyComponent = () => {
  return (
    <>
      <div style={{ backgroundColor: 'red' }}>First div</div>
      <div style={{ backgroundColor: 'blue' }}>Second div</div>
    </>
  );
};

export default MyComponent;

Fragment

import React from 'react';

const MyComponent = () => {
  return (
    <Fragment>
      <div style={{ backgroundColor: 'red' }}>First div</div>
      <div style={{ backgroundColor: 'blue' }}>Second div</div>
    </Fragment>
  );
};

export default MyComponent;

부모요소가 없을 경우 아래와 같은 오류 발생!

// Fail to compile
// parsing error : adjacent JSX elements be wrapped in an enclosing tag
// Did you want a JSX fragment <>...</>?

if문(for문) 대신 삼항 연산자 사용

if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용한다.

const MyComponent = ({ isLoggedIn }) => {
  return (
    <div>
      {isLoggedIn ? (
        <p>Welcome, user!</p>
      ) : (
        <p>Please log in to continue.</p>
      )}
    </div>
  );
};

HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용

JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어 주어야 한다.
SX에서는 class가 아닌 className 을 사용한다.

const MyComponent = () => {
  return (
    <div className="container">
      <label htmlFor="inputField">Name:</label>
      <input type="text" id="inputField" />
    </div>
  );
};

스타일 적용 예시

import React from 'react';

const MyComponent = () => {
  const containerStyle = {
    backgroundColor: 'lightblue',
    padding: '20px',
    border: '1px solid blue'
  };

  const textStyle = {
    color: 'white',
    fontSize: '16px'
  };

  return (
    <div style={containerStyle}>
      <p style={textStyle}>Styled paragraph</p>
    </div>
  );
};

export default MyComponent;

주석

한줄 주석

{/…/} 와 같은 형식을 사용

const element = (
  <div>
    {/* 이것은 한 줄 주석입니다 */}
    <h1>Hello, world!</h1>
  </div>
);

여러 줄 주석

// 의 형식을 사용

const element = (
  <div>
    {/* 
      여러 줄 주석입니다.
      이 부분은 렌더링되지 않습니다.
    */}
    <h1>Hello, world!</h1>
  </div>
);