리액트 웹페이지 만들기 ep.2 - 컴포넌트(component), JSX의 이해 (feat. 화살표함수)

2022.03.16 - [개발/리액트 홈페이지 만들기] - 리액트 웹페이지 만들기 ep.1 - 환경 구축, react-create-app 설치 및 테스트

 

앞서 react-create-app 을 사용하여 project를 생성한 후, npm start 를 통해 간단히 테스트 해보았습니다. 먼저 프로젝트를 생성하면 폴더 내에 여러 파일이 생성됩니다. 

 

 

npm start 명령어를 입력하면 여기에서 index.js 를 실행 시켜줍니다. 

 

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

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

// 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();

 

컴포넌트(component)

리액트로 만들어진 웹페이지는 모든 화면을 컴포넌트 별로 나눠서 작업할 수 있습니다. 여기서 컴포넌트는 쉽게 말하자면 하나의 덩어리로, 웹페이지는 여러 덩어리들이 모여 적절하게 배치시킨 후 보여집니다. 또한 함수형 컴포넌트, 클래스형 컴포넌트가 있는데 저는 함수형 컴포넌트로 작성합니다. 

 

index.js 를 간단하게 보면 먼저 App.js 에서 App 이라는 덩어리를 import 합니다. (앞으로 덩어리를 컴포넌트라 지칭하겠습니다.)

 

// ./App.js 파일에서 App 컴포넌트를 import 함
import App from './App';

 

그다음 ReactDom.render 를 통해 import 된 App 컴포넌트를 실행시켜준다고 생각하시면 됩니다.

 

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

 

JSX

여기에서 리액트의 특징이 드러납니다. ReactDOM.render 내 App을 보면, 마치 html 태그처럼 작성되어 있습니다. 이것은 리엑트에서 사용되는 JSX 라는 문법 입니다.

 

// 리액트의 JSX
<App />

 

JSX는 자바스크립트의 확장 문법으로 html 태그처럼 생겼지만 이를 자바스크립트 형태의 코드로 변환됩니다. 또한 html 을 동시에 작성할 수도 있어 가독성이 높고 작성하기 쉽습니다. 이를 위해 index.js에 import 된 App.js 를 살펴보겠습니다.

 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

App.js 안에는 App() 함수가 정의되어 있습니다. 함수 내에서 return 부분을 살펴보면, html 코드로 작성되어 있습니다. 이는 index.js 에서 <App /> 을 사용 할 때, App.js 에서 정의된 App() 함수가 실행되면서 JSX 로 작성된 부분이 return 되어 보여지는 원리입니다.

 

앞으로 프로젝트를 진행하면서 화면을 구성하는 컴포넌트는 모두 JSX로 return 된다고 보면됩니다. (모든 컴포넌트가 JSX 로 return 되지는 않습니다. 연산을 위한 컴포넌트, 데이터베이스에서 데이터 호출을 위한 컴포넌트 등 다양한 이유가 존재하기 때문입니다.)

 

화살표 함수(arrow function)

화살표 함수는 ES6의 문법으로 function 키워드를 사용해서 함수를 만드는 것보다 간단하게 함수를 표현할 수 있습니다. 따라서 앞으로 만들어지는 모든 컴포넌트는 이 화살표 함수를 통해서 만들 예정입니다. 화살표 함수는 항상 익명으로, ()=>{} 로 표현됩니다. 익명이라 함은 어떠한 변수나 상수를 선언하여 정의함을 의미합니다. 현재 만들어진 App() 함수를 화살표 함수로 바꾸면 아래와 같습니다.

 

import logo from './logo.svg';
import './App.css';

const App = () => {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

마무리

컴포넌트와 JSX는 리액트를 계속 공부하다보면 자연스럽게 익혀지고 익숙해집니다. 기본 틀을 익혔으니 이제 조금씩 확장하도록 하겠습니다. 

 

오늘도 행복한 코딩생활 되시기 바랍니다. 감사합니다.