[React] 리액트 기초와 리액트 앱 생성

리액트를 한마디로 정의하자면, "컴포넌트 기반 UI 개발 자바스크립트 라이브러리"라고 할 수 있겠다.

 

1. 컴포넌트 기반 UI 개발

 기본적으로, 리액트는 UI를 컴포넌트 단위로 나누어 설계하고 각 컴포넌트를 조합하여 개발한다.

 

2. 자바스크립트 라이브러리

 리액트는 자바스크립트로 작성되어 있는 라이브러리이고, 작성된 컴포넌트를 사용하기 위해서 자바스크립트 코드를 작성해야 한다.

 

리액트는 기본적으로 SPA(Single Page Application) 개발에 최적화된 라이브러리이며, Next.js나 Gatsby 같은 프레임워크를 사용하면 서버 사이드 렌더링(Server Side Rendering, SSR)이나 정적 사이트 생성(Static Side Generation, SSG) 방식으로도 개발할 수 있다.

 

기존에는 웹 앱 개발 시, 새로운 페이지로 이동할 때마다 서버에서 개별 HTML 파일을 요청하는 MPA(Multi-Page Application) 방식이 일반적이었지만, SPA(Single Page Application)가 등장하면서 초기 로드 시 하나의 HTML 파일을 기반으로 JavaScript를 통해 이후 브라우저 새로고침 없이 클라이언트 측에서 여러 뷰를 동적으로 렌더링하는 애플리케이션 구조가 가능해졌다.

 

여러 방식에 대해서는 다음에 한꺼번에 정리해 보고, 이번 글에서는 리액트 앱을 생성해 보고 글을 마치도록 하겠다.

 

리액트 앱을 개발할 때는 create-react-app(CRA) 패키지를 사용한다.(참고로, 최근에는 Vite 등 다른 방식도 사용된다.) CRA는 Node.js의 패키지 관리자인 npm을 통해서 설치가 가능하고 CRA를 실행하면 리액트 앱 개발을 위한 의존성 추가 및 디렉터리(패키지) 구조 생성을 수행한다.

 

# npm을 사용하여 create-react-app 패키지를 설치한다.
npm install create-react-app

# 프로젝트명 위치에 프로젝트 이름을 넣고 명령어를 실행하면
# 해당 이름을 가진 리액트 앱 프로젝트가 생성된다.
npx create-react-app 프로젝트명

 

리액트 앱 생성이 완료되면 다음과 같은 디렉터리 구조와 파일들이 생성된다.

• node_modules: Node.js 패키지 관리용 디렉터리로, 리액트 앱 실행에 필요한 모든 의존성 패키지(react, react-dom, webpack 등)가 저장된다.
• package.json 및 package-lock.json:
  • package.json: 앱의 의존성과 실행 스크립트를 정의하는 파일.
  • package-lock.json: 의존성 트리를 기록하여 일관된 버전으로 패키지를 설치하도록 보장하는 파일.
• public: 정적 파일을 저장하는 디렉터리로, 파비콘(favicon.ico)과 index.html 파일이 포함된다. index.html은 React 앱이 렌더링되는 루트 HTML 파일이다.
• src: 애플리케이션의 주요 소스 코드와 스타일 파일(CSS 등)이 포함된 디렉터리로, 리액트 앱의 엔트리 포인트(index.js)와 컴포넌트 파일들이 위치한다.