[React] JSX 와 Component

react 는 대부분이 새로운 개념없이 javascript 코드로 이루어져 있습니다.

하지만 새롭게 알아야하는 개념도 물론 존재하죠.

react 를 시작하기 전에 react 에서 새롭게 등장한 개념, JSX 를 살펴봅시다.

 

JSX

JSX 에 대해서 알아보도록 하겠습니다.

const element = <h1>Hello, World!</h1>;

주어진 변수는 바로 JSX 입니다.

어떤 것인지 이해가 가시나요?

JSX 는 javascript 와 XML 의 합성어로서 자바스크립트 문법의 확장판으로서 UI 가 실제로 어떻게 보일지를 설명해줍니다.

위에서 설명 했듯이 javascript, XML 을 합쳤기 때문에 두 언어의 장점을 모두 취하고 있습니다.

XML 과 같이 마크업 되어 있기 때문에 구조를 한 눈에 알아보기 쉽고 javascript 의 표현식도 사용이 가능해집니다.

{} 내부는 javascript 의 표현식으로 인식하게 됩니다.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'minsung',
  lastName: 'kang'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

JSX 는 Babel 에 의해서 React.createElement() 호출로 컴파일이 됩니다.

아래 예시를 컴파일 하면 어떻게 될까요?

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

 

아래와 같이 js object 로 변하고 이를 React elements 라고 합니다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

 

Component

component 는 처음 생긴 react project 에서도 찾아 볼 수 있습니다.

index.js 를 보면 <App /> 이 등장합니다.

html 과 유사하긴 하지만 html 은 아닙니다.

이것이 바로 component 입니다.

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

 

component 는 UI 를 독립적이고 재사용가능하게 해주는 역할을 하며 함수, 클래스 두 가지 방법으로 구현이 가능합니다.

우선은 함수형 component 에 대해서 먼저 알아봅시다.

다음과 같이 component 가 정의되어 있으며 React elements 를 반환합니다.

// src/App.js

import React from 'react';

function App() {
  return (
    <div className="App">
      hello
    </div>
  );
}

export default App;

컴포넌트를 직접 만들어봅시다.

src 안에 새로운 파일 Mycomp.js 을 만들어주고 react 를 import 합시다.

import React from "react"

 

함수를 정의하는데 함수의 이름 첫글자는 대문자로 해줍니다.

function Mycomp(){
    return <h3>world!</h3>;
}

 

이를 다른 파일에서 사용하기 위해서는 export 를 해줘야합니다.

export default Mycomp;

 

다른 파일에서 export 한 component 를 사용하기 위해서는 import 해줘야합니다.

이제 index.js 에서 이를 import 해주고 사용해봅시다.

하지만 하나의 component 만 render 할 수 있기 때문에 App 과 Mycomp 두 개가 올 수 없고 에러가 발생합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Mycomp from './Mycomp';

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

 

Mycomp 를 App.js 에서 사용해봅시다.

import React from 'react';
import Mycomp from './Mycomp'

function App() {
  return (
    <div>
      hello
      <Mycomp />
    </div>
  );
}

export default App;

 

브라우저를 확인해보면 결과가 나온 걸 확인할 수 있습니다.

hello
world!