React 시작하기

서론

  백엔드 개발자 또한 최근에 React를 요구하는 기업이 늘어나고 있는 추새입니다. 이에 React를 학습해보고자 합니다. 

https://react.dev/

React

React란 사용자 인터페이스(UI)를 구축하기 위해 메타(구 페이스북)에서 개발한 오픈  소스 자바스크립트 라이브러리 입니다.

 

React의 주요 특징

컴포넌트 기반 구조 (Component Based Architecture)

컴포넌트(Component)는 UI를 구성하는 독립적이고 재사용 가능한 코드 블록으로 각 컴포넌트는 상태(State)와 속성(Props)를 가질 수 있습니다.

 

가상 DOM (Virtual DOM)

React는 변경 사항이 있을 때마다 DOM을 직접 수정하지 않고 가상 DOM에서 변경 사항을 먼저 반영한 뒤에 실제 DOM에 적용합니다.

 

단방향 데이터 바인딩 (One Way Binding)

부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 props를 사용합니다.

 

Javascript XML

Javascript 내에서 HTML을 작성할 수 있게 해주는 문법입니다.

 

 

React 설치

Reat를 설치할 때 명령어 npx는 node.js 문법입니다. 따라서 React를 시작하려면 node.js를 설치해야 합니다.

https://nodejs.org/en

Node.js — Run JavaScript Everywhere

 

node.js를 설치가 완료되었다면 원하는 위치에 폴더를 하나 만들어 줍니다. 저는 바탕화면에 reacts라는 폴더를 생성했습니다.

 

생성이 완료되었으면 비주얼 스튜디오 코드를 실행하고 생성한 폴더를 열어줍니다.

 

ctrl + ` 키누르면 터미널이 열리게 됩니다. 터미널에서 다음과 같은 명령어를 입력해 줍니다.

npx create-react-app my-app

npx는 node.js의 명령어로 설치하라는 의미인데 create-react-app을 설치하라는 의미입니다. 여기서 my-app은 해당 디렉터리 명으로 설치하라는 의미입니다. 

 

설치가 완료되면 다음과 같은 명령어를 사용할 수 있습니다.

• npm start : 개발 서버를 시작하는 명령어입니다.
• npm run build : 애플리케이션을 배포할 수 있도록 빌드합니다.
• npm test : 애플리케이션에 작성된 테스트 코드를 실행합니다.
• npm run eject : 프로젝트의 기본 설정을 외부에 숨기지 않고 모든 설정 파일을 프로젝트에 직접 노출합니다.

npm start를 누르면 설치가 끝나 웹 브라우저에 localhost:3000을 입력하면 React 앱에 연결할 수 있습니다. 만약 port 3000번이 사용 중이면 why를 입력해서 다른 포트를 사용하도록 설정하면 됩니다.

 

React 설치 오류 시

added 1319 packages in 36s

264 packages are looking for funding
  run npm fund for details

Installing template dependencies using npm...
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: my-app@0.1.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @testing-library/react@13.4.0
npm error node_modules/@testing-library/react
npm error   @testing-library/react@"^13.0.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\hhs04\AppData\Local\npm-cache\_logs\2024-12-29T03_35_18_299Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\hhs04\AppData\Local\npm-cache\_logs\2024-12-29T03_35_18_299Z-debug-0.log
npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0 failed

2024년 12월 5일 React 19 정식 버전이 출시되어 npx 기능이 제대로 동작하지 않는 문제가 발생하고 있습니다. 버전 18과 버전 19의 호환성 문제로 다운그레이드 해야 합니다. 다음과 같은 방식으로 다운그레이드 하면 됩니다.

 

npx create-react-app my-app

위 명령어로 React를 설치했다면 my-app 디렉터리로 이동해야합니다.

 

cd my-app

그럼 React가 설치된 디렉터리로 터미널이 이동하게 됩니다. 여기에 다운그레이드 하면 됩니다.

 

npm install react@18 react-dom@18

 

 

React 수정

설치된 my-app 디렉터리에는 src 디렉터리가 존재합니다. src에는 index.js라는 파일이 존재하는데 해당 파일이 앱을 실행하는 입구입니다. 즉 React 애플리케이션을 구동하면 index.js 파일을 찾아서 동작시킵니다.

 

여기서 <App />라는 코드 부분이 존재하는데 해당 부분을 지우면 화면이 지워집니다. 즉 <App />는 UI를 의미합니다.

 

그럼 <App />은 어디서 왔는가?

바로 코드에서 윗 부분을 보면 다음과 같은 코드가 작성되어 있습니다.

import App from './App';

<App />은 위에 App에서 왔습니다.

 

그럼 App은 또 어디서 왔는가 하고 찾으면 from 뒤에 './App'에서 온 것을 알 수 있습니다.

 

./App은 어디서 왔는지 확인하면 .은 현재 디렉터리를 뜻하고 App.js라는 파일을 불러오는 것을 의미합니다.

 

App.js 파일을 확인하면 안에 App() 이라는 함수가 존재하는데 함수 안의 코드가 화면을 구성합니다.

 

즉 index.js는 전역적인 설정이 들어가고 App.js가 UI를 편집해 나가는 부분입니다.

 

React 배포

React를 배포하기 위해서는 다음과 같은 명령어를 터미널에 입력하면 됩니다.

npm run build

이전에 npm start 명령어를 이용해서 애플리케이션을 실행한 화면은 개발할 때는 용이하나 불필요한 내용들 때문에 용량이 큽니다. 그래서 위에 명령어를 입력합니다.

 

위 명령어를 입력하면 build 라는 디렉터리가 생깁니다. 해당 디렉터리에는 애플리케이션을 실행하기 위한 내용들이 들어 있는 폴더입니다. index.html을 보면 공백없이 코드가 나열된 모습을 볼 수 있습니다.

 

터미널을 보면 serve -s build라는 명령어가 보이는데 serve에는 -s옵션을 사용하면 사용자가 어떤 경로로 오든 index.html 파일로 서비스한다는 의미이고 build 폴더의 index.html 파일을 서비스하겠다는 의미입니다.

npx serve -s build

 

서버가 동작하는 것을 확인할 수 있습니다. React는 node.js를 사용하기 때문에 해당 명령어를 터미널에 작성하면 간편하게 서비스가 동작합니다.