create-react-app 컴포넌트 만들기 with JSX

 

리액트 컴포넌트

 

리액트에서는 웹문서를 구성하는 각 부분(요소)을 컴포넌트(componenet)라고 부릅니다. 

리액트로 사용자 인터페이스를 만들 때는 엘리먼트를 어떻게 재사용 가능한 조각으로 나눌 것인지를 고려하는 것이 좋습니다. 

 

 

JSX

 

컴포넌트는 자바스크립트와 HTML을 조합한 문법입니다. 두 언어를 조합한 문법이므로 초반의 낯선 느낌만 잘 넘기고 나면 어렵지 않게 학습을 진행할 수 있는 문법입니다. 아래에서 예제를 통해 JSX를 이용한 컴포넌트 작성을 진행해보도록 하겠습니다. 

 

 

예제 프로젝트 구조 

 

create-react-app 명렁어를 통해 프로젝트 폴더를 먼저 생성하고, 코드를 수정하여 아무 기능도 없는 앱으로 만드는 것이 먼저입니다(여기에 대한 내용은 글에서는 생략하겠습니다).

그런 다음 src 폴더 안에 Greet.js 라는 이름의 새 파일을 만들어 줍니다. 컴포넌트를 만들 때는 기본적으로 파일의 앞글자를 대문자로 하고, 컴포넌트(클래스 기반이든 함수 기반이든)의 이름도 대문자로 시작해주는 것이 중요한 규칙입니다.

 

이 상태에서 Greet.js의 내용을 아래와 같이 작성해줍니다. 

import React from 'react'
 
function Greet(){
  return <h1 className="greeting">Hello</h1>
}
 
export default Greet;

여기에서 4번째 줄을 보면, Greet 함수가 HTML 태그를 반환하는 것을 확인할 수가 있는데, 이는 순수한 HTML 코드가 아닌 JSX입니다. 여기 있는 <h1>태그에는 className 이라는 속성이 자리하고 있는 것이 보이는데, 자바스크립트에서는 class가 키워드이므로 JSX 태그에 class 속성을 추가하기 위해서는 class 대신 className 이라는 속성을 사용해야 합니다. 

마지막 줄에는 export 명령이 추가되었는데, 이러면 다른 파일에서 Greet 컴포넌트를 사용할 수 있게 됩니다. 이제 완성한 컴포넌트를 사용해 보겠습니다. App.js 로 이동 후 코드를 아래와 같이 수정해줍니다.

import React from 'react';
import './App.css';
 
// Greet을 가져오기
import Greet from './Greet';
 
function App() {
  return (
    <div>
      <Greet />
    </div>
  );
}
 
export default App;

5번 줄에서는 Greet.js의 내용을 여기로 가져오겠다, 라는 의미의 import를 진행해주었습니다. 그런 App 컴포넌트가 반환할 내용에 <Greet /> 코드를 추가해줍니다. 이러면 App 컴포넌트가 Greet 컴포넌트의 부모가 됩니다.

그렇다면 이제 웹문서를 통해 결과를 확인해보겠습니다.

 

Greet 컴포넌트의 내용이 웹문서에 표시되고 있는 것을 확인할 수 있습니다. 여기에 스타일을 추가해보도록 하겠습니다.  App.css 로 이동 후 코드를 작성합니다. 

.greeting{
  padding: 10px;
  color: tomato;
}

결과 확인만 남았습니다. 

 

스타일이 잘 적용된 것을 확인할 수 있습니다. 그러면 이번에는 브라우저의 개발자 도구를 사용해 웹문서가 어떤 식으로 렌더링 되었는지를 확인해보겠습니다. 

 

확인 결과, 우리가 자바스크립트 코드를 사용해 만든 컴포넌트를 리액트가 해석해서 HTML 코드가 정상적으로 렌더링 되게끔 만든 것을 확인할 수가 있습니다. 

 

자바스크립트 식 

 

자바스크립트 식을 중괄호로 감싸면 중괄호 안의 식을 평가해서 결과값을 돌려주어야 한다는 의미로 해석됩니다. 예를 들면 다음과 같은 코드를 작성하는 것도 가능합니다(Greet.js).

import React from 'react'
 
function Greet(){
 
  const greeting = "Hello Boys & Girls"
 
  return <h1 className="greeting">{greeting}</h1>
}
 
export default Greet;

greeting이라는 변수의 문자열 값을 태그 안에 포함시키는 JSX 코드입니다. 웹문서의 결과는 아래와 같이 나타납니다.