리액트 시작하기

ho_vi·2023년 9월 19일

목록 보기

1/19

React는 사용자 인터페이스(UI)를 만들기 위해 사용되는 자바스크립트 라이브러리입니다.

React는 싱글 페이지 애플리케이션(Single Page Application, SPA) 개발에 주로 사용되며, Virtual DOM과 JSX라는 독특한 개념을 사용하여 동작합니다. 또한, 컴포넌트(Component)라고 불리는 작은 코드 모음을 활용하여 복잡한 UI를 손쉽게 구성할 수 있도록 해줍니다.

왜 리액트인가?

최근 몇 년간 전 세계 개발자는 자바스크립트에 뜨겁게 열광하고 있습니다.

한 때 자바스크립트는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어에 불과했지만 현재는 웹 애플리케이션에서 가장 핵심적인 역할을 합니다. 더 나아가 영역을 확장하여 서버사이드는 물론 모바일, 데스크톱 애플리케이션에서도 엄청나게 활약 합니다.

복잡하고 거대한 애플리케이션을 만들기 위해서는 자바스크립트만으로 관리하기는 복잡도가 증가 합니다. 이를 해결하기 위해 수많은 프레임워크가 등장하였으며, 이 플레임워크들은 주로 MVC 아키텍처, MVVM 아키텍쳐를 사용 합니다.

MVC 아키텍처

JSON 객체 값을 사용해 뷰를 갱신하는 경우 요소를 찾아 업데이트하게 되는데 애플리케이션 규모가 크면 상당히 복잡해지고 성능도 떨어지게 됩니다.

페이스북 개발 팀은 이를 해결하기 위해 하나의 아이디어를 고안해 냈는데, 어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를 날려 버리고 처음부터 새로 렌더링하는 방식 입니다. 이렇게 하면 애플리케이션 구조가 매우 간단하고, 작성해야 할 코드양도 많이 줄어듭니다. 더 이상 어떻게 변화를 줄지 신경 쓸 필요가 없고, 그저 뷰가 어떻게 생길지 선언하며, 데이터에 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 따라 새로 렌더링 합니다.

리액트의 이해

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다. 오직 View만 신경 쓰는 라이브러리 입니다.

리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포넌트라고 합니다.

컴포넌트는 다른 프레임워크에서 사용자 인터페이스를 다룰 때 사용하는 템플릿과 다른 개념 입니다.

컴포넌트는 재 사용이 가능한 API로 수많은 기능들이 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의 합니다.

사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 합니다.

장점

가상 DOM(Virtual DOM) 기반으로 UI를 빠르게 업데이트할 수 있습니다.
컴포넌트 기반 아키텍처로, 코드의 재사용성이 높아집니다.
단방향 데이터 흐름을 강조하여 예측 가능한 상태 관리가 가능합니다.
JSX 문법을 사용하여, 자바스크립트와 HTML을 쉽게 조합할 수 있습니다.
다양한 라이브러리와 프레임워크와 쉽게 연동이 가능합니다.
커뮤니티가 크고 활발하며, 많은 개발자들이 사용하고 있습니다.

단점

초기 학습이 어렵습니다.
컴포넌트 기반 아키텍처로 개발 시, 구조 설계에 시간이 많이 소요될 수 있습니다.
복잡한 애플리케이션의 경우 상태 관리가 복잡해질 수 있습니다.
라이브러리이기 때문에, 애플리케이션 개발에 필요한 다른 기능(라우팅, 상태 관리 등)을 추가로 구현해야 할 수 있습니다.

초기 렌더링

어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요합니다.

리액트에서는 이를 다루는 render 함수가 있습니다.

render() { … }

업데이트 (redonciliation -조정, 조화)

리액트에서 뷰를 업데이트 할 때는 “업데이트 과정을 거친다”라고 하기보다는 “조화 과정을 거친다”라고 하는 것이 더 정확한 표현 입니다. 컴포넌트에서 데이터에 변화가 있을 때 우리가 보기에는 변확에 따라 뷰가 변형되는 것처럼 보이지만, 사실은 새로운 요소를 갈아 끼우기 때문 입니다.

이 작업 또한 render 함수가 담당 합니다.

render 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환 합니다.

컴포넌트는 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 또 다시 호출 합니다.

이 때 render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, 이전에 render 함수가 만들었던 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교 합니다.

자바스크립트를 사용하여 두 가지 뷰를 최소한의 연산으로 비교한 후, 둘이 차이를 알아내 최소한의 연산으로 DOM 트리를 업데이트 합니다.

리액트의 특징

Virtual DOM

리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것 입니다.

Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.

리액트에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트할 때는 다음 세 가지 절차를 밟습니다.

데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링 합니다.
이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다.
바뀐 부분만 실제 DOM에 적용합니다.

기타 특징

일부 웹 프레임워크가 MVC 또는 MVW 등의 구조를 지향하는 것과 달리 리액트는 오직 뷰만 담당 합니다.

리액트는 프레임워크가 아니라 라이브러리 입니다.

리액트는 뷰만 신경 쓰는 라이브러리이므로 기타 기능은 직접 구현하여 사용해야 합니다.

작업 환경 설정

리액트 프로젝트를 생성하는 사전 준비 작업을 수행하고 나서 첫 리액트 프로젝트를 만들어 볼 것입니다.

Node.js와 npm

리액트 프로젝트를 만들 때는 Node.js를 반드시 먼저 설치해야 합니다.

Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임입니다.

2009년 Node.js를 출시한 후 자바스크립트는 웹 브라우저 영역 외에 웹 서버는 물론, 모바일 애플리케이션, 데스크톱 애플리케이션 영역에서도 엄청나게 활약할 수 있게 되었습니다.

리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적인 연관은 없지만, 프로젝트 개발하는 데 필요한 주요 도구들이 Node.js를 사용하기 때문에 설치하는 것입니다. 이때 사용하는 개발 도구에는 바벨과 웹팩 등이 있습니다.

Node.js를 설치하면 Node.js 패키지 매니저 도구인 npm이 설치됩니다. npm으로 수많은 개발자가 만든 패키지를 설치하고 설치한 패키지의 버전을 관리할 수 있습니다. 리액트 역시 하나의 패키지 입니다.

Node.js 설치

$ node -v

yarn

yarn은 npm을 대체할 수 있는 도구로 npm 보다 더 빠르며 효율적인 캐시 시스템과 기타 부가기능 제공합니다.

$ npm install —global yarn

$ yarn —version

VS Code 플러그인

ESLint : 자바스크립트 문법 및 코드 스타일 검사해 주는 도구 입니다.
Reactjs Code Snippets : 리액트 컴포넌트 및 라이프사이클 함수를 작성할 때 단축 단어를 사용하여 간편하기 코드 완성
Prettier-Code formatter : 코드 스타일을 자동으로 정리해 주는 도구 입니다.

create-react-app으로 프로젝트 생성하기

$ yarn create react-app kh-sample-react

👉 yarn을 사용하지 않는 경우 $ npm init react-app <프로젝트 이름>

프로젝트 실행

$cd hello-react

$yarn start

참고 사항

기본 포트 변경

리액트 기본 포트인 3000번을 변경하려면 다음과 같은 절차를 따르면 됩니다.

리액트 애플리케이션의 package.json 파일을 엽니다.
"scripts" 객체에서 "start" 항목을 찾습니다.
"start" 항목의 값을 "react-scripts start --port <포트번호>"로 변경합니다. 예를 들어, 포트번호를 4000으로 변경하려면 다음과 같이 작성합니다.

"start": "react-scripts start --port 4000",

사용 중인 포트 강제 종료하기

Windows

netstat -ano | findstr 3000

taskkill /f /pid PID

MAC

lsof -i :3000

kill -9 PID

package.json

리액트 애플리케이션에서 사용되는 package.json 파일은 프로젝트의 정보와 의존성 모듈, 스크립트 등을 정의하는 JSON 파일입니다. 보통 이 파일은 프로젝트 루트 디렉토리에 위치합니다.

name: 프로젝트의 이름
version: 프로젝트의 버전
private: 패키지가 개인적인 용도로 사용되는지 여부
dependencies: 애플리케이션에서 사용되는 의존성 모듈들의 목록
scripts: 실행 가능한 스크립트들의 목록
eslintConfig: ESLint 설정 정보
browserslist: 프로젝트에서 지원하는 브라우저 목록

README.md

리액트 애플리케이션에서는 일반적으로 README.md 파일이 프로젝트의 설명과 문서화를 위해 사용됩니다. 이 파일은 프로젝트 루트 디렉토리에 위치합니다.

프로젝트의 이름과 설명
프로젝트의 목적과 기능
사용된 기술 스택과 라이브러리
설치와 실행 방법
빌드와 배포 방법
프로젝트 구조와 파일 구성
프로젝트 기여 방법
라이선스 정보

리액트 프로젝트 폴더 구조

my-react-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src/
│   ├── App.js
│   ├── index.js
│   ├── index.css
│   └── assets/
│       ├── images/
│       └── styles/
├── package.json
├── package-lock.json
└── README.md

node_modules/: 프로젝트에서 사용하는 의존성 모듈이 설치되는 폴더
public/: 정적 파일과 HTML 파일이 저장되는 폴더
- favicon.ico: 웹 사이트 아이콘
- index.html: 웹 페이지의 루트 HTML 파일
- manifest.json: 웹 앱 매니페스트 파일
src/: React 애플리케이션 소스 코드가 저장되는 폴더
- App.js: 애플리케이션의 루트 컴포넌트
- index.js: React 애플리케이션을 렌더링하는 진입점 파일
- index.css: 전역 CSS 스타일 파일
- assets/: 이미지나 스타일 시트 등의 리소스 파일이 저장되는 폴더
package.json: 프로젝트 정보와 의존성 모듈, 스크립트 등을 정의하는 JSON 파일
package-lock.json: 의존성 모듈의 버전과 의존성 관리 정보를 저장하는 JSON 파일
README.md: 프로젝트를 소개하고 설명하는 마크다운 파일

위의 구조는 일반적인 React 프로젝트 구조입니다. 더 복잡한 프로젝트에서는 이 구조를 확장하거나 조정할 수 있습니다.

ho_vi

FE 개발자🌱

다음 포스트