Homile

Create React App

리액트 프로젝트를 시작하는 가장 쉬운방법입니다.

기본적인 리액트 코드 파일이 있는 미리 설정된 폴더들과 상용화할 수 있는 리액트 앱을 구축할 수 있도록 돕는 가장 중요한 환경설정 파일들이 존재합니다. 작성한 프로그램을 미리보기 할 수 있도록 해주고 코드나 기타 다른 것들이 변경될 때마다 브라우저가 자동적으로 페이지를 업데이트 하는 방식으로 이 프로그램을 미리 볼 수 있어 개발 과정을 단순화시켜 줍니다.

node.js

브라우저 밖에서 자바스크립트 코드가 실행될 수 있도록 하는 자바스크립트 런타임이 필요하다. 리액트를 위해 필요한 것은 아니지만 create react app을 실행하기 위해 node.js가 필요하기 때문에 node.js를 먼저 설치를 해줘야 한다.

Create React App 명령어 사용

• 터미널을 실행한 후 경로를 설정한다.
• npx create-react-app "생성할 폴더명"

• 명령어 실행 후 아래와 같은 화면이 나온다면 정상적으로 설치 된 것이다.

• 설치가 정상적으로 되었다면 생성된 리액트 폴더에 연결하여 npm start 명령어를 작성하면 리액트 서버가 실행됩니다.

• 정상적으로 실행되었다는 문구가 나온다면 http://localhost:3000/ 에 접속하여 실행결과를 볼 수 있습니다.(기본경로)

• 서버를 종료하고 싶다면 서버가 구동중인 터미널로 가서 ctrl+c를 눌러 구동을 멈출 수 있습니다.
• VScode를 사용중이라면 리액트 폴더를 열어서 npm install 명령을 사용하여 package.json에 있는 프로젝트에 필요한 모든 패키지와 개발에 필요한 것들을 다운로드해서 설치합니다.

React?

JavaScript 라이브러리이며 사용자 인터페이스를 만드는 데 사용됩니다.

화면을 새로고침하여 모든 요소를 렌더링 하지 않고, 요청하는 요소만 렌더링하는 방식인 SPA를 사용한다.

내장된 기능은 많지 않아서 라우팅 같은 기능이 필요하다면 추가적으로 서드 파티 라이브러리를 설치해야 한다.

React를 사용하는 이유

일반적인 DOM을 조작하여 HTML들의 요소들을 렌더링 할 때는 JavaScript만 사용해도 가능하지만 사용자에게 뭔가 다른 요소들을 보여주려 할 때 새로운 HTML 페이지를 불러오지 않고 화면만 변경해 사용자에게 보여줄 수 있게 해주는 것이 가능하다.

1. 개발자에게 확장 가능한 대화형 웹 응용 프로그램을 구축하기 위한 검증된 도구를 제공하는 코드를 작성할 수 있다.
2. 최신 반응형 사용자 인터페이스를 구축하여 복잡한 사용자 인터페이스를 쉽게 만들 수 있도록 해준다.
3. 컴포넌트를 사용하여 유지보수와 관리가 용이하도록 유지된다.

SPA (Single Page Application)

링크를 클릭하고 새로운 페이지를 로드 할 때 페이지를 전환한 것처럼 보이지만 실제로 서버로부터 새로운 페이지를 요청하지 않고, 화면에 보이는 컴포넌트를 변경해줘서 페이지가 전환된 것처럼 보이는 것입니다.

다른 프레임워크

Angular

컴포넌트 기반의 UI 프레임워크이며, 리액트와 마찬가지로 컴포넌트에만 초점을 맞추고 있다.

리액트보다 더 많은 내장 기능을 가지고 있으며 처음부터 타입스크립트를 수용했다.

하지만 너무 많은 기능이 내장되어 있기 때문에 작은 프로젝트보다 규모가 큰 프로젝트에 적합하다.

리액트와 컴포넌트를 구성하는 방법이 다르다.

Vue.js

Angular와 react를 합쳐놓은 구조이며, 컴포넌트 기반의 UI 프레임워크입니다.

기능이 Angula보다는 적고,React보다는 많으며 라우팅 같은 핵심 기능을 포함하여 의존성이 낮습니다.

왜? React를 선택했는가?

Angular, vue보다 가볍기 때문에 소규모 프로젝트에 적합하고, 현재 국내 및 해외에서 많은 기업들이 React를 사용하고 있기때문에 장기간 사용할 수 있는 라이브러리라고 생각이 되었기 때문입니다.

또한, 웹 앱을 만들 때 React Native를 사용하여 웹 앱을 구현할 수 있기 때문에 React를 선택하였습니다.