[React] JSX 와 Component

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

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

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

JSX

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

const element = Hello, World!;

주어진 변수는 바로 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 = ( Hello, {formatName(user)}! ); ReactDOM.render( element, document.getElementById('root') );

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

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

const element = ( Hello, world! );

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

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

Component

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

index.js 를 보면 이 등장합니다.

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

이것이 바로 component 입니다.

// src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.getElementById('root'));

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

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

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

// src/App.js import React from 'react'; function App() { return ( hello ); } export default App;

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

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

import React from "react"

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

function Mycomp(){ return world!; }

이를 다른 파일에서 사용하기 위해서는 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(, document.getElementById('root'));

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

import React from 'react'; import Mycomp from './Mycomp' function App() { return ( hello ); } export default App;

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

hello world!

from http://ssungkang.tistory.com/265 by ccl(A) rewrite - 2020-03-06 16:54:39