프로젝트 템플릿 만들기

리액트 애플리케이션을 생성하면 기본적으로 생성된 폴더들이 있는데요. 불필요한 폴더들을 삭제하고 기본 템플릿을 만들어 보겠습니다.

완성된 템플릿

불필요한 파일을 제거하고 완성된 템플릿은 아래와 같습니다

App.js

function App() {
  return (
    <div>
      <h1>Test</h1>
    </div>
  )
}

export default App

index.js

import React, { StrictMode } from "react";
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'

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

앱 구조

먼저, 앱의 구조를 살펴보면, 퍼블릭 폴더 아래 index.html이 싱글페이지를 대표하는 파일이고 리액트 컴포넌트는 root라는 아이디를 가지는 div 요소 안에 표시됩니다.

구현하기

리액트 앱 생성

리액트?

소스폴더를 열고 담긴 파일들을 모두 지웁니다.

컴포넌트 생성

리액트는 컴포넌트 단위로 구성되며 컴포넌트 간에 상하관계를 가집니다. 컴포넌트를 구성하기 위해 최상위 컴포넌트인 App컴포넌트 파일을 생성합니다.

컴포넌트는 클래스 또는 함수로 생성합니다. 함수로 생성하는 방법이 많이 사용되므로 함수로 생성해 보겠습니다.

function App() {
  return (
    <div>
      <h1>Test</h1>
    </div>
  )
}

export default App

엔트리 포인트 생성

리액트와 HTML 파일을 연결하는 index.js 파일을 생성합니다

리액트사용에 필요한 리액트와 돔요소를 활용하게 해 주는 리액트 돔을 추가하고

import React from "react";
import ReactDOM from "react-dom"

리액트 돔 루트를 생성하고 생성된 루트에 컴포넌트나 요소를 추가하여 화면에 표시합니다

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  
)

위에서 생성한 앱컴포넌트를 추가하면 아래와 같습니다.

스트릭트 모드 추가하기

스트릭트 모드는 조금 더 엄격하게 에러를 표시하는 기능입니다. 추가는 React.StrictMode태그를 생성하고 앱 컴포넌트를 그 안에 넣으면 됩니다 

 

import React, { StrictMode } from "react";
import ReactDOM from 'react-dom/client'
import App from './App'

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

글로벌 스타일 추가하기

공통스타일이 되는 파일로 설정은 index.css파일을 생성하고

해당 파일을 index.js파일에 추가합니다

import './index.css'

이상으로 리액트 앱 템플릿을 생성하는 방법을 보았습니다.