JSX에 대한 간단한 실습

1. 개요

지금까지 JSX에 대한 이론을 간단하게 정리하였다. 이제 JSX 문법을 이용한 간단한 실습을 하고자 한다. 

create-react-app 을 이용하여, react에 대한 기본적인 스켈레톤 코드를 받고 그 src 폴더 밑에 Chapter_03이라는 폴더를 하나 만든다. 그리고 위와 같이 Book.jsx 와 Library.jsx 파일을 하나씩 만들겠다. 

 

2. Book.jsx

import React from "react";

function Book (props) {
    return (
        <div>
            <h1>{`이 책의 이름은 ${props.name} 입니다.`}</h1>
            <h2>{`이 책은 총 ${props.numOfPage}페이지로 이뤄져 있습니다.`}</h2>
        </div>
    );
}

export default Book;

코드에 대한 설명을 하겠다. Book이란 함수는 props를 인수로 받는다. props는 객체의 형태인 듯 하다. 밑에서 보면 점 표기법으로 props의 값들을 골라내서 사용하고 있다. 여기서 props는 Html 태그의 속성들을 묶어놓은 객체이다. 이 의미가 와닿지 않을 수 있는데, 밑에서 더 후술하겠다. 위의 코드는 default로 Book이라는 함수를 export(수출)하고 있다. 이렇게 수출하면, 프로젝트 내의 다른 jsx 파일에서 import(수입)하여 해당 함수를 사용할 수 있게 된다. 사용은 어떻게 할까? 다음 Library.jsx를 살펴 보며 이야기하자. 

 

3. Library.jsx

import React from "react";
import Book from "./Book";

function Library(props) {
    return (
        <div>
            <Book name="처음 만난 파이썬" numOfPage={300}/>
            <Book name="처음 만난 AWS" numOfPage={400}/>
            <Book name="처음 만난 리액트" numOfPage={500}/>
        </div>
    )
}

export default Library;

Library라는 함수는 Book이란 함수를 수입하여 사용하고 있다. 잘 보면 Book의 속성으로 name과 numOfPage를 정의하고 해당 속성들에 값 또한 정의해놓았다. 감이 좀 오는가? 저렇게 Book이란 태그에서 속성 = "값" 형태로 기술해놓으면 Props라는 객체에 속성: 값 형태로 정의 되어 들어가게 되고, 그것을 Book 내부 함수에서 사용할 수 있는 것이다. 그림으로 표현하면 다음과 같다.

이제 해당 Library를 루트인 index.jsx까지 전달하여 사용하고 화면에 띄워보자. 

4. Index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Library from './chapter_03/Library';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Library />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

원래 React.StrictMode 태그 사이에 <app /> 이 있었는데, 이를 Library 태그로 교체 했다. 이렇게 하고 실행하면, 화면은 다음과 같이 뜬다.