[React] 1장 - JSX의 정의 및 기본 구성 요소

1. JSX란?

JSX(Javascript XML)는 HTML의 연장 언어인 XML처럼 자바스크립트의 XML 버전이라고 할 수 있으며, 기존의 hmtl문서와 JavaScript 파일을 분리하여 사용하던 방식을 탈피하여 동일한 파일에 마크업 언어와 자바스크립트 코드를 혼용하여 사용할 수 있는 문법을 의미합니다.

이러한 JSX 코드는 그대로 웹 브라우저에서 실행하려고 할 때 오류가 발생되는데요. 그래서 바벨(Babel) 플러그인과 같은 트랜스파일러를 거쳐 웹 브라우저가 실행 가능한 자바스크립트 코드로 변환하는 과정을 통해 실행되게 됩니다.

// 1. JSX에서 작성된 코드 예시
import React from 'react';

const MyComponent = ({ name, age }) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>You are {age} years old.</p>
    </div>
  );
};


// 2. Babel-plugin에 의해 자바스크립트 변환된 코드 예시
import React from 'react';

const MyComponent = ({ name, age }) => {
  return React.createElement('div', null,
    React.createElement('h1', null, `Hello, ${name}!`),
    React.createElement('p', null, `You are ${age} years old.`)
  );
};

2. JSX의 구성 요소

이러한 JSX의 코드 구성은 크게 세 가지로 추릴 수 있는데요. 각각의 요소와 특징은 다음과 같습니다.

1. JSXElement : JSX를 구성하는 기본 요소중 하나이며, 마크업 언어와 동일하게 type(태그의 종류), props(속성), children(자식 요소)가 한 쌍으로 존재하는 요소입니다. 이 요소는 마크업 언어에서 기본적으로 사용되는 태그들이 사용 가능하며, 사용자가 해당 요소를 직접 만드는 것 또한 가능합니다.

이때 사용자가 직접 만드는 JSXElement를 통상적으로 컴포넌트라고 부르며, 해당 섹션에는 간단하게 말씀 드리자면 JSXElement는 컴포넌트를 포함한 모든 태그들을 의미하는 요소입니다. (참고로 컴포넌트는 보통 단일 컴포넌트인 SelfClosingTag로 사용됩니다.)

이러한 JSXElement의 이름 규칙은 자바스크립트의 식별자 규칙과 동일하며, 정의 된 해당 컴포넌트(반환 함수)의 내부에 작성하는 것을 원칙으로 하는데요.

특히 하나의 컴포넌트에 반환될 JSXElement의 개수가 하나만 존재할 경우, 소괄호를 생략하고 return 키워드로 반환해 주면 되고, 두 개 이상의 JSXElement가 존재할 경우 소괄호로 감싼 후 하나의 div태그 및 JSXFragment(<></>)안에 작성해 주어야 합니다.

import React from 'react';
import SubComponent from "./SubComponent"

const MyComponent = () => {
  return (
    <div className="my-component">
      <h1>Hello, JSXElement!</h1> // 기본적인 html 태그도 사용 가능하지만
      <p>This is a simple React component.</p>
      <SubComponent/> // 사용자가 직접 만든 컴포넌트 또한 사용 가능합니다.
    </div>
  );
};

export default MyComponent;

2. JSXAttributes : JSXElement의 속성(props)를 의미합니다. 기본적인 마크업 언어의 속성들을 사용 가능하며, 추가적으로 작성자가 전달하고자 하는 속성을 직접 만들어 객체 형태로 함수에 전달하는 것 또한 가능합니다.

특히 해당 속성을 전달 받는 쪽에서는 해당 속성들이 담긴 객체를 통째로 받는 방법(보통 props라고 네이밍) 하여 해당 프로퍼티(속성)을 이용하는 방법과, 구조 분해 할당을 이용해 직접 속성을 매개변수에 할당하는 방법이 존재합니다.

또한 구조 분해 할당으로 속성을 받을 경우 소괄호 안에 중괄호(자바스크립트의 변수일 경우 무조건 중괄호 안에 작성해야 합니다.)안에서 작성해야 한다는 주의점이 있습니다.

// 1. MyComponent 컴포넌트에 전달할 속성의 작성 예시
import React from 'react';
import MyComponent from "./components/MyComponent"

function App(){
  return (
    <div className = "MyContainer"> // html 태그에서 특정 태그를 css에 연결할 때에는 class 속성을 사용하지만, JSX에서는 className 속석을 이용하여 연결합니다.
      <MyComponent name = "Re_Go", age = 30/> // 해당 컴포넌트에 사용자가 직접 정의한 name과 age 속성을 객체 형태로 전달
    </div>
  );
};

export default MyComponent;
// 2. 단일 객체로 속성을 받을 경우
import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <p>{props.name} is {props.age} years old.</p>
    </div>
  );
};

export default MyComponent;


// 3. 구조 분해 할당을 이용해 직접 매개변수에 속성들을 할당해 주는 경우
import React from 'react';

const MyComponent = ({ name, age }) => {
  return (
    <div>
      <p>{name} is {age} years old.</p>
    </div>
  );
};

export default MyComponent;

⭐ 구조 분해 할당으로 매개변수에 속성들을 할당할 경우 지정되어 있는 매개변수의 개수에 비해 속성들의 값이 더 많을 경우, 레스트 연산자(...)를 이용하여 전달 받는 방법 또한 가능합니다.

단 props와 구조 분해 할당을 동시에 이용하는 방법은 허용되지 않습니다.

import React from 'react';

const MyComponent = ({ name, age, ...otherProps }) => {
  // name과 age는 직접 추출, 나머지는 otherProps에 할당
  return (
    <div>
      <p>{name} is {age} years old.</p>
      {/* 나머지 속성들 사용 가능 */}
      <p>Other Props: {JSON.stringify(otherProps)}</p> // 나머지 속성들을 JSON.stringify를 이용하여 문자열로 출력
    </div>
  );
};

export default MyComponent;

3. JSXChildren : JSXElement의 각각의 자식 요소를 가리키는데, 간단히 얘기해서 태그 안의 내용이라고 보시면 되겠습니다. 이 안에는 마크업 처럼 태그 안에 사용자가 텍스트를 입력하는 방법도 허용되며, 자바스크립트로 작성 된 변수의 값을 입력하는 방법 또한 가능합니다.

특히 중괄호(자바스크립트 코드)를 이용하여 텍스트를 표시할 경우 단순히 변수 뿐만 아니라 논리식, 연결식의 형태로도 사용이 가능합니다.

import React from 'react';

let text = "이것은 변수를 이용한 텍스트 입력입니다."
const state = false;

const MyComponent = () => {
  return (
    <div>
      <p>This is a text content in JSXChildren.</p> // 일반 텍스트 입력
      <p>{text}</p> // 자바스크립트 변수도 JSXChildren으로 지정 가능
      {state ? <p check = {true}>이것은 참입니다.<p/> : <p check = {false}>이것은 거짓입니다.<p/>} // 삼항 연산자를 이용하여 state의 상태에 따라 반환할 JSXElement를 입력.
    </div>
  );
};

export default MyComponent;