React.js 소개 및 Vite를 이용한 초기 설정 가이드

chaen·2024년 4월 4일

REACT / NEXT.js

목록 보기

1/22

❓ React는 무엇일까

리액트는 복잡한 웹 서비스를 쉽고 빠르게 개발할 수 있는 Node.js의 유명한 라이브러리 중 하나로, 페이스북, 인스타그램, 넷플릭스 등 매우 대중적인 서비스들을 개발할 때 사용한 기술입니다.

리액트는 Facebook 개발 팀에서 만들어져 오프 소스로 공개되었습니다. 일반적인 정적인 웹 서비스와 달리, 당시 Facebook은 동적이고, 사용자와 인터렉션 하는 기능이 많이 필요했기에 리액트를 직접 만들게 되었습니다.

💻 React의 장점과 특징

컴포넌트 기반의 유연성

HTML과 바닐라 자바스크립트를 사용하여 개발할 때, 모든 페이지에서 header를 요구한다면 위와 같이 각 문서 파일에 동일한 코드가 중복되게 됩니다. 수정할 때도 하나씩 다 수정해야 겠지요. 이와 다르게 리액트를 모듈화를 이용하여 중복 코드를 제거합니다.
리액트에서는 여러 페이지에서 공통으로 사용하는 코드를 컴포넌트 (페이지를 구성하는 요소) 단위의 모듈로 만들어 놓고 필요할 때 호출해 사용합니다.
이는 각 컴포넌트가 독립적으로 작동하고 재사용 가능하다는 것을 의미하며, 가독성과 유지보수성을 향상시킵니다.

가상 돔 (Virtual DOM)

React는 가상 DOM을 사용하여 실제 DOM과의 상호 작용을 최소화합니다. 매번 요소의 상태가 변할 때마다 실제 돔을 수정하는 게 아닌, 가상 돔을 만들어 모든 변화를 일단 다 반영하고, 마지막에 실제 문서 객체 모델에 반영하기 때문에 애플리케이션의 성능과 사용자 경험을 향상시킵니다.

대중적인 지원 및 커뮤니티

React는 매우 인기 있는 기술이며, 다양한 라이브러리와 프레임워크가 개발되어 있습니다. 이로 인해 버그를 해결하거나 새로운 기능을 구현하는 데 용이합니다. 또한 공식 문서와 다양한 온라인 자료가 풍부하여 학습이 용이합니다.

이와 같이 React.js는 대규모 프로젝트에서도 강력한 UI 관리를 제공하여 현재 많은 개발자들이 선택하는 기술 중 하나입니다.

💻 Vite로 리액트 설치하기

React는 npm의 라이브러리이기 때문에 Node.js 패키지를 먼저 생성한 후, react 라이브러리를 설치하고 기타 도구 설치 및 설정을 손 봐줘야 합니다. 이러한 방법은 링크를 통해서 경험할 수 있습니다.
다. 하지만 이 경우는 직접 설정들을 손봐야 하기 때문에 입문자에게 권장되지 않고, 대신 Vite를 사용합니다.

Vite 설치하기

차세대 프론트엔드 개발 툴로, 기본 설정이 적용된 React App을 생성할 수 있습니다. 리액트 공식 문서에서도 이를 권장하고 있습니다.

터미널을 열고 아래와 같이 명령어를 입력합니다.

npm create vite@latest

React 설치하기

위의 명령어를 입력하면, 차례대로 선택지가 나옵니다.
우선 project name을 적고, enter을 누르면 프레임워크를 고를 수 있습니다.

저희는 React를 선택해야 합니다.
이후 나오는 언어의 경우 타입스크립트와 자바스크립트를 선택할 수 있으며 둘 중 원하는 언어로 골라 선택하면 설치가 완료됩니다.

모두 설치를 완료하면 기본으로 설정된 eslint, package.json, .gitignore, vite.config.js 등을 볼 수 있습니다.

VSCode의 확장인 Prettier을 사용중이라면, Eslint와 충돌이 일어날 수 있기 때문에 따로 설정해주어야 합니다. 해당 정보에 관해서는 Prettier & Eslint를 구글링해서 찾을 수 있으며, 필자는 링크처럼 설정 후 사용하고 있습니다.

개발용 라이브러리 설치하기

위 과정까지 설치하고 package.json을 보면, depedencies와 devDependaencies 파일에 명시된 수많은 라이브러리들이 설치되지 않은 것을 볼 수 있습니다. devDependaencies는 오로지 개발할 때 유용한 라이브러리를 모아두었기 때문에 배포하거나 공유할 때는 포함되지 않습니다. 따라서 직점 해당 정보들을 기반으로 라이브러리를 설치해줘야 합니다.