React 설치 및 실행 방법: 누구든지 따라할 수 있는 가이드

 

서론

끊임없이 진화하는 웹 개발 세계에서 React는 사용자 인터페이스 구축을 위한 가장 인기 있고 강력한 JavaScript 라이브러리 중 하나로 부상했습니다. 2013년 Facebook에서 개발한 React를 사용하면 개발자는 페이지를 다시 로드하지 않고도 데이터를 변경할 수 있는 대규모 웹 애플리케이션을 만들 수 있습니다. 주요 목표는 빠르고 확장 가능하며 단순하다는 것입니다. React를 처음 접하거나 개발 툴킷에 React를 추가하는 것을 고려하고 있다면 이 가이드는 React가 무엇인지, React를 설치하는 데 필요한 프로그램은 무엇인지, 설치 방법 및 React 파일을 생성하는 방법을 안내합니다.

 

리액트란 무엇인가요?

React는 사용자 인터페이스 구축을 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. 이를 통해 개발자는 "구성 요소"라고 하는 작고 분리된 코드 조각으로 복잡한 UI를 만들 수 있습니다. React에는 구성 요소 기반 아키텍처가 있습니다. 즉, UI가 자체 상태를 관리하며 재사용 가능한 조각으로 구분됩니다. 이를 통해 대규모 웹 애플리케이션을 보다 쉽게 ​​개발하고 유지 관리할 수 있습니다.

 

React를 설치하려면 어떤 프로그램이 필요한가요?

React를 사용하기 전에 컴퓨터에 몇 가지 필수 구성 요소가 설치되어 있는지 확인해야 합니다.

1. Node.js 및 npm: React 프로젝트는 서버에서 JavaScript를 실행할 수 있는 JavaScript 런타임인 Node.js를 사용하여 관리되고 구축됩니다. npm(노드 패키지 관리자)은 Node.js에 포함되어 있으며 npm 레지스트리에서 패키지(예: React)를 설치하는 데 사용됩니다.
2. 코드 편집기: 어떤 텍스트 편집기에서든 React 코드를 작성할 수 있지만 더 나은 코딩 경험을 위해 JavaScript 및 React 구문 강조를 지원하는 코드 편집기를 사용하는 것이 좋습니다. 인기 있는 옵션으로는 Visual Studio Code, Sublime Text, Atom이 있습니다.
3. 브라우저: React 애플리케이션을 보려면 최신 웹 브라우저가 필요합니다. Google Chrome, Firefox, Safari 및 Edge는 모두 애플리케이션 디버깅에 도움이 되는 다양한 개발자 도구를 갖춘 탁월한 선택입니다.

React 설치 순서

Node.js와 npm이 설치되면 다음 단계에 따라 새 React 프로젝트를 만들 수 있습니다.

터미널이나 명령 프롬프트를 엽니다. 이는 운영 체제에 따라 다를 수 있습니다.
Windows에서는 명령 프롬프트 또는 PowerShell을 사용할 수 있습니다.
macOS 및 Linux에서는 터미널을 사용할 수 있습니다.

 

1. Node.js 설치하기

React.js를 사용하기 위해서는 Node.js가 설치되어 있어야 합니다. Node.js는 자바스크립트 런타임으로, 서버 측 자바스크립트를 실행할 수 있도록 해줍니다.

Node.js를 설치하기 위해서는 공식 사이트에서 다운로드 받아 설치합니다. 다운로드 및 설치 과정은 간단합니다.

해당 사이트로 접속하시면 두가지 다운로드 버튼이 존재합니다.

 

설치 파일은 안전성을 위해 검시 된 LTS 버전으로 설치하시면 됩니다. 

Node.js

설치가 완료되었다면, 정상적으로 설치가 되었는지 확인을 위해 명령 프롬프트 또는 터미널에서 명령을 실행하여 node.js 및 npm이 제대로 설치되었는지 확인할 수 있습니다.

현재 세팅된 버전이 최신버전 20.11.1이 아닌 18.19.1인 이유는 다른 개발언어 호환 세팅을 위해 다운그레이드 시킨 버전입니다.

해당 글은 최신 버전 20.11.1 버전을 설치하셔도 React 생성에 대해 전혀 피해가 없는걸 확인 후 올리는 글입니다.

 

2. React 실행하기

1. 다음으로 터미널에서 다음 명령을 실행하여 새 React 애플리케이션을 만듭니다.

//my-react-app -> File Name
npx create-react-app my-react-app

my-react-app을 원하는 프로젝트 이름으로 변경하시면 됩니다.

이 명령은 적절한 기본 구성으로 새 React 프로젝트를 설정하는 Create React App CLI 도구를 다운로드하고 실행합니다.

 

2. 다음을 실행하여 새로 생성된 프로젝트 디렉터리로 이동하세요.

cd my-react-app

 

3. 개발 서버를 시작하려면 다음을 실행하세요.

npm start

 

이 명령은 개발 서버를 시작하고 브라우저에서 새 React 앱을 엽니다.

자동으로 열리지 않으면 브라우저에서 http://localhost:3000을 수동으로 방문할 수 있습니다.

만약, 여러개의 프로젝트를 실행 시킬 경우 해당 경로 포트번호를 올려주시면 됩니다.

예) 첫번째 3000번 두번째 3001번 ~

 

3. React 가이드 문서

React 인터페이스를 만들기 위해 해당 문서를 참고하여 진행할 수 있습니다.

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

결론

드디어 여러분들도 React에 대한 실행이 가능해졌습니다.

설치 및 실행 방법에 대해 그렇게 어려운 부분이 없다보니 처음 접해보는 초보자 분들도 쉽게 따라하실 수 있을거라 믿습니다.

이제 파일 생성하여 실행하는 방법까지 끝났으니, 앞으로 저랑 함께 차근차근 React의 세계에 빠졌으면 좋겠습니다.