[React]리액트 설치 및 프로젝트 진행 과정

react logo

개발 환경 설정

node.js 가 설치되어있는지 확인합니다.

node -v
npm -v

 

설치가 안되어있다면 node.js 공식사이트에서 설치합니다.

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

Node.js를 설치하면 npm(Node Package Manager)도 함께 설치됩니다.

 

React 프로젝트 생성

Create React App 사용

Create React App은 React 프로젝트를 쉽게 시작할 수 있도록 도와주는 도구입니다.

1. 터미널을 열고, 프로젝트를 생성할 디렉토리로 이동합니다.
2. 다음 명령어를 입력하여 React 프로젝트를 생성합니다:

npx create-react-app my-app

 

my-app 은 프로젝트 이름입니다. 원하는 이름으로 변경할 수 있습니다.

 

npm install -g create-react-app 명령어를 사용하여 설치하는 것은 더 이상 권장되지 않습니다. 이유는 다음과 같습니다:

권장 방법 변경

예전에는 create-react-app을 전역 설치해서 사용하는 방법이 일반적이었지만, 이제는 npx를 사용하는 방법이 권장됩니다. npx를 사용하면 최신 버전의 create-react-app을 항상 사용할 수 있으며, 글로벌 설치로 인한 버전 관리 이슈를 피할 수 있습니다.

전역 설치의 문제점

• 버전 관리 어려움: 전역 설치된 패키지는 업데이트가 필요한 경우 다시 수동으로 업데이트해야 합니다. 또한, 다른 프로젝트에서 다른 버전이 필요할 때 버전 충돌 문제가 발생할 수 있습니다.
• 프로젝트 간 독립성 감소: 전역 설치를 하면 모든 프로젝트가 동일한 create-react-app 버전을 사용하게 되므로, 특정 프로젝트가 특정 버전에서만 잘 동작하는 경우 문제가 될 수 있습니다.

프로젝트를 생성했으면 프로젝트 디렉토리로 이동합니다.

cd my-app

 

그후 프로젝트를 실행합니다.

npm start

 

브라우저가 열리면서 http://localhost:3000에서 기본 React 앱이 실행되는 것을 볼 수 있습니다.

반응형

프로젝트 구조 이해

기본적으로 생성된 React 프로젝트의 폴더 구조는 다음과 같습니다:

• node_modules/: 프로젝트의 의존성 패키지들이 설치되는 폴더입니다.
• public/: 공개적으로 접근 가능한 정적 파일들이 있는 폴더입니다. index.html 파일이 여기 있습니다.
• src/: 실제로 React 코드가 작성되는 곳입니다. 여기에서 주로 작업을 하게 됩니다.
  • index.js: React 애플리케이션의 진입점 파일입니다.
  • App.js: 주요 컴포넌트를 정의하는 파일입니다.

React 컴포넌트 만들기

React에서는 UI를 컴포넌트 단위로 나누어 개발합니다. 새로운 컴포넌트를 만들어 봅시다.

1. src 폴더 안에 components 폴더를 생성합니다.
2. 그 안에 Hello.js라는 파일을 생성하고 다음 코드를 작성합니다.

import React from 'react';

function Hello() {
  return <h1>Hello, React!</h1>;
}

export default Hello;

 

App.js 파일을 열고 Hello 컴포넌트를 가져와 사용합니다.

import React from 'react';
import Hello from './components/Hello';

function App() {
  return (
    <div className="App">
      <Hello />
    </div>
  );
}

export default App;

 

이제 브라우저에서 Hello, React!라는 문구를 볼 수 있습니다.

상태 관리 (State) 및 이벤트 처리

React에서 상태 관리는 컴포넌트 내의 동적인 데이터를 처리하는 방식입니다. 버튼을 클릭하면 상태가 변경되고, 그에 따라 UI가 업데이트되는 간단한 예제를 만들어 봅시다.

Counter.js라는 파일을 components 폴더에 생성하고 다음 코드를 작성합니다.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

 

App.js에서 Counter 컴포넌트를 추가합니다.

import React from 'react';
import Hello from './components/Hello';
import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <Hello />
      <Counter />
    </div>
  );
}

export default App;

 

브라우저에서 버튼을 클릭할 때마다 카운트가 증가하는 것을 볼 수 있습니다.

스타일링 (CSS)

React 컴포넌트에 스타일을 추가하는 방법은 여러 가지가 있습니다. 간단한 CSS 파일을 만들어 적용해 보겠습니다.

 

App.css 파일을 수정하여 다음 스타일을 추가합니다.

.App {
  text-align: center;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 20px;
  cursor: pointer;
}

 

App.js에서 App.css를 import합니다.

import React from 'react';
import './App.css';
import Hello from './components/Hello';
import Counter from './components/Counter';

function App() {
  return (
    <div className="App">
      <Hello />
      <Counter />
    </div>
  );
}

export default App;

 

이제 스타일이 적용된 버튼과 텍스트를 볼 수 있습니다.

프로젝트 빌드 및 배포

개발이 완료된 React 애플리케이션을 실제 배포할 준비를 합니다.

 

프로젝트를 빌드합니다.

npm run build

 

이 명령어를 실행하면 build/ 폴더에 최적화된 애플리케이션이 생성됩니다.

생성된 파일을 웹 서버에 업로드하여 배포할 수 있습니다. Netlify, Vercel과 같은 서비스 또는 직접 서버를 설정해 배포할 수 있습니다.

 

참고문서 : 

https://reactjs-kr.firebaseapp.com/tutorial/tutorial.html

Tutorial: Tic-Tac-Toe – React