리액트(React)는 현대 웹 애플리케이션 개발에서 매우 인기 있는 라이브러리입니다. 리액트는 사용자 인터페이스를 구축하기 위한 컴포넌트 기반의 접근 방식을 제공합니다. 이번 강좌에서는 리액트 환경 설정과 새로운 프로젝트를 시작하는 방법, 그리고 프로젝트 디렉토리 구조와 주요 파일에 대해 자세히 설명하겠습니다.

1. 리액트 환경 설정

리액트를 시작하기 위해서는 먼저 개발 환경을 설정해야 합니다. 리액트 개발을 위해 필요한 도구는 다음과 같습니다:

• Node.js: 리액트 애플리케이션은 Node.js 환경에서 실행됩니다. 따라서 Node.js를 설치해야 합니다. Node.js는 JavaScript 런타임 환경으로 서버 사이드 및 클라이언트 사이드에서 JavaScript를 실행할 수 있습니다.
• npm (Node Package Manager): Node.js를 설치하면 npm도 함께 설치됩니다. npm은 JavaScript 라이브러리를 관리하고 설치하는 데 사용되는 도구입니다.
• 코드 에디터: Visual Studio Code, Atom, 또는 Sublime Text와 같은 코드를 작성할 수 있는 에디터가 필요합니다.

1.1 Node.js 설치

Node.js를 설치하기 위해 아래의 단계에 따라 진행하세요:

1. Node.js 공식 웹사이트에 방문하여 운영체제에 맞는 설치파일을 다운로드합니다.
2. 다운로드한 설치파일을 실행하고 설치 마법사의 지침에 따라 설치합니다.
3. 설치가 완료되면 터미널 또는 명령 프롬프트를 열어 다음 명령어로 설치가 잘 되었는지 확인합니다:

node -v

npm -v

버전 번호가 출력되면 Node.js와 npm 설치가 성공적으로 완료된 것입니다.

1.2 Create React App으로 프로젝트 생성하기

리액트를 사용하여 애플리케이션을 개발하는 가장 쉬운 방법 중 하나는 Create React App이라는 도구를 사용하는 것입니다. 이 도구는 리액트 애플리케이션을 초기화하고 필요한 기본 구성을 설정해 줍니다.

1. 아래의 명령어를 통해 Create React App을 설치합니다:

npx create-react-app my-app

여기서 my-app은 여러분이 생성하고자 하는 프로젝트의 이름입니다. 명령어 실행 후, Create React App이 자동으로 필요한 파일과 디렉토리를 생성해줍니다.

2. 프로젝트 디렉토리 구조 이해하기

Create React App을 사용하여 생성된 프로젝트는 일반적으로 다음과 같은 구조를 가집니다.

my-app/
├─ node_modules/
├─ public/
│  ├─ index.html
│  └─ favicon.ico
├─ src/
│  ├─ App.css
│  ├─ App.js
│  ├─ App.test.js
│  ├─ index.css
│  ├─ index.js
│  └─ logo.svg
├─ .gitignore
├─ package.json
├─ README.md
└─ yarn.lock

2.1 주요 디렉토리 및 파일 설명

2.1.1 node_modules/

이 디렉토리는 프로젝트의 모든 의존성 패키지를 포함하고 있습니다. npm이나 Yarn과 같은 패키지 매니저가 설치한 모든 라이브러리가 이곳에 저장됩니다. 일반적으로 이 폴더는 버전 관리 시스템(git)에 포함시키지 않습니다.

2.1.2 public/

이 디렉토리에는 정적 파일이 포함되어 있습니다. 여기에서 주목할 만한 파일은 index.html입니다. 이 파일은 애플리케이션의 HTML 템플릿으로, React 컴포넌트가 이 HTML 파일 안에서 렌더링됩니다. 기본적으로 React는 <div id="root"></div> 요소 안에 컴포넌트를 렌더링합니다.

2.1.3 src/

이 디렉토리는 리액트의 모든 자바스크립트 파일과 스타일 파일을 포함하며 실제 애플리케이션의 소스 코드를 작성하는 곳입니다. 중요한 파일은 다음과 같습니다:

• App.js: 애플리케이션의 메인 컴포넌트로, 여기서 다른 컴포넌트를 import 하여 사용자 인터페이스를 구성합니다.
• index.js: 리액트 애플리케이션의 진입점입니다. 이 파일에서 ReactDOM.render()를 사용하여 App 컴포넌트를 index.html의 div#root 요소에 렌더링합니다.
• App.css: App.js에 대한 스타일을 정의하는 CSS 파일입니다.

2.1.4 .gitignore

이 파일은 Git에서 버전 관리에서 제외할 파일 및 디렉토리를 명시합니다. 보통 node_modules/와 같은 디렉토리가 포함됩니다.

2.1.5 package.json

이 파일은 프로젝트의 메타데이터를 포함하고 있으며, 의존성, 스크립트, 프로젝트의 이름 및 버전 등을 정의합니다. "scripts" 섹션에서는 프로젝트를 빌드하거나 개발 서버를 실행하는 명령어를 지정합니다.

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

2.1.6 README.md

프로젝트의 설명, 설치 방법, 사용법 등을 기록하는 문서입니다. 프로젝트를 다른 사람과 공유할 때 유용합니다.

2.1.7 yarn.lock

yarn을 사용할 경우 의존성과 버전을 고정하기 위한 파일입니다. npm을 사용하는 경우, package-lock.json 파일이 대신 생성됩니다.

3. 첫 번째 리액트 컴포넌트 작성하기

이제 프로젝트가 생성되었으니, 첫 번째 리액트 컴포넌트를 작성해보겠습니다. src/App.js 파일을 열어 다음 코드를 입력합니다:

import React from 'react';
import './App.css';

function App() {
    return (
        

            

                
Welcome to My First React App!
            
        
    );
}

export default App;

위의 코드에서는 기본적인 리액트 컴포넌트를 작성했습니다. 컴포넌트는 function 키워드를 사용하여 정의하며, JSX를 반환합니다. JSX는 JavaScript에서 HTML과 유사한 문법을 사용할 수 있게 해주는 JavaScript 확장 문법입니다.

3.1 애플리케이션 실행하기

이제 다음 명령어를 사용하여 개발 서버를 실행할 수 있습니다:

npm start

브라우저에서 http://localhost:3000으로 이동하면 “Welcome to My First React App!”이라는 문구가 나타나는 것을 확인할 수 있습니다.

4. 결론

이번 강좌에서는 리액트 개발 환경을 설정하고, 프로젝트를 생성하며, 디렉토리 구조와 주요 파일에 대해 알아보았습니다. 기본적인 내용이지만, 이를 통해 리액트 개발의 기초를 잘 이해할 수 있었을 것입니다. 앞으로의 강좌에서는 리액트의 다양한 기능과 컴포넌트, 상태 관리, 라우팅 등을 다룰 예정입니다.

5. 참고 자료

• 리액트 공식 문서
• Node.js 공식 문서
• Create React App GitHub