Component 만들기 - JSX와 Babel

본격적으로 react에 들어갈 컴포넌트를 작성해보자. 포넌트는 어떻게 만드는 걸까?

JSX

컴포넌트를 작성하게 도와주는 문법이다. 문자도, html도 아닌 js의 확장 문법이다. 때문에 js의 기본 기능이 포함되어 있다. 아래와 같이, 태그의 값을 변수로 대입할 수 있게 도와준다.

const element = <h1>Hello, world!</h1>

그리고 아래와 같이 태그 내에서 js변수 또는 기능을 작성할 수 있게 해준다

const username = "Mark"
const element = <div>{username}</div>			// ===> <div>Mark</div> 로 변환

JSX는 HTML과 유사하지만, 실제로는 React.createElement 함수로 변환되어 Virtual DOM element를 생성한다. 이후 이것은 react의 비교 알고리즘에 의해 실제 DOM 업데이트에 활용된다. 또한 컴포넌트를 만들 때, 굳이 jsx형태로 리엑트를 하지 않아도 된다. React.createElement(태그, 속성, 값) 으로 작성할 수 있다. 하지만 jsx문법으로 작성하는 것이 관례이고, jsx 작성법이 더 간결하고 가독성이 뛰어나기에 이 방법으로 진행해주면 된다.

파일의 형식은 .jsx 로 구분되며, typescript 전용 jsx는 tsx이다. tsx 파일 역시 Babel과 같은 도구를 사용하여 일반 js로 변환되며, ts 전용 컴파일러를 통해 타입 검사 및 변환 작업이 추가적으로 수행된다는 차이점이 있다.

또한 jsx는 웹 공격을 안전하게 막아준다. 모든 항목은 렌더링 되기 전에 문자열로 변환되기특성으로 인해 웹 공격으로 부터 안전하게 막아준다.

Babel

이렇게 작성된 JSX 문법을 브라우저가 이해할 수 있도록 js로 변경을 해주는 컴파일러가 필요하다. 이 역할을 하는 것이 Babel이다. react와 같은 프레임워크를 사용할 수 있도록 도와주는 필수적인 도구이다. babel은 CRA를 통해 설치할 때 자동으로 세팅을 해주기에 개발자는 다른 추가 작업이 필요하지 않다.

---

사용법

기본적인 함수형 컴포넌트의 사용법이다. function 을 사용하는 일반 함수 대신 const를 사용하는 arrow function도 사용 가능하다.

import React from 'react';

function MyPage(props) {
  return (
    <div>
      <h1>Hello, JSX!</h1>
      <p>This is a JSX example.</p>
    </div>
  );
}

export default MyPage;

또한 ts react에서는 컴포넌트의 타입과 props의 타입을 지정하여 다음과 같이 작성한다.

import React, { FC } from 'react';

interface Props {
	message: string;  
} 

const MyPage: FC<Props> = ({ message }) => {
  return (
    <div>
      <h1>Hello, TSX!</h1>
      <p>{message}</p>
    </div>
  );
}

export default MyPage;

arrow function으로 tsx문법으로 컴포넌트를 작성해 보았다. jsx와 다른 주요 문법을 설명해 보자면,

• FC : 컴포넌트의 타입을 나타내준다. Functional Component의 줄임로, 단순한 함수형 컴포넌트를 정의할 때 사용되는 타입이다

• interface
  타입을 지정해주는 ts의 문법이다. 컴포넌트에서 사용할 props의 타입을 지정해준다.

• FC
  함수형 컴포넌트를 정의하면서 해당 컴포넌트가 어떤 속성(props)을 받아야 하는지 명시적으로 지정할 때 사용된다.

{...props} 구문

이 구문은 props에 담긴 다양한 속성을 마치 js의 전개 연산자(spread operator) 처럼 컴포넌트에 한꺼번에 전달해주는 역할을 한다. 이를 잔여 연산자(rest operator)라 한다. 만약 이전 props를 보장하고 새로운 props를 추가하는 형식을 사용하려면 {...props} 를 맨 앞에 넣어야 한다

const ParentComponent: FC<Props> (props) => {
 	return <ChildComponent {...props} name='Alex' age={24} />
}

---

컴포넌트 규칙

컴포넌트를 만들 때도, 지켜야할 몇가지 중요한 규칙과 관례가 있다.

• 대문자로 시작
  일반 html의 태그와 react의 컴포넌트를 구분짓기 위해 반드시 대문자로 시작해야한다.

• 파일이름과 일치
  MyButton 이란 컴포넌트를 만들 때, 파일의 이름은 MyButton.tsx or MyButton.jsx 여야 한다. 하지만, 추출할 컴포넌트가 아니라면 같은 파일 내에서 다른 컴포넌트를 만들어도 상관은 없지만, 권장되는 방법은 컴포넌트마다 각각 파일을 나누는 것이다.

Fragment

react 에서 element를 반활 할 때, <div>, <input>, <p> 등의 여러가지의 html 태그를 반환한다. 하지만 element를 반환할 때, 이러한 태그없이 단순 값으로만 이루어진 형식을 리턴하고 싶을 때도 발생한다. 이때, <React.Fragment> 를 사용한다.

  return (
      <React.Fragment>
        <ChildA />
        <ChildB />
        <ChildC />
      </React.Fragment>
  );

react에서는 컴포넌트를 반환할 때 반드시 단 하나만의 부모요소로 감싸서 리턴해야한다.
하지만 <React.Fragment> 를 사용하면 해당 규칙에 위배되지 않으면서 실제 구성되는 html에는 Fragment의 자식 요소로만 이루어져있는 것을 확인할 수 있다. 이 기능은 css를 통해 엘리먼트의 레이아웃을 배치할 때 유용하다.