TIL 47 | React intro & CRA Setting

Saemsol Yoo·2021년 1월 25일
0

React

목록 보기
1/6
post-thumbnail

프레임워크/라이브러리를 왜 사용하게 되었을까?

웹 애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해서는 더이상 DOM으로 접근하는 방법이나, jQuery를 이용해 개발하는 방법으로는 코드를 유지보수하기 어려워졌다. 그래서 이렇게 규모가 커지고 복잡해진 애플리케이션의 생산성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하게 하기 위해 다양한 Frontend Framework와 Library가 등장하게 되었고 그렇게 등장하게된 것이 Angular, Vue, React 이다.


Angular

2010년 Google에서 개발한 프레임워크이다. 타입스크립트 기반으로 매우 안정적이고 탄탄한 프론트엔드 앱개발이 가능하며, 프레임워크답게 다양한 기능이 내장되어 있다. 하지만 무겁고 배우기가 어렵다는 단점이 있다.

Vue

2014년 Evan You라는 개인이 개발한 프레임워크이다. 코드가 깔끔하고 배우기가 쉽기 때문에 가장 나중에 생겼지만 성장 속도가 정말 빠르다.

React ✨

지속적으로 데이터가 변화하는 대규모 애플리케이션 구축! 을 목표로 2013년 Facebook에서 개발한 라이브러리이다. Model과 View 모두를 다루는 아키텍쳐(MVC:Model-View-Controller Architecture)인 Angular ,Vue 와는 다르게 리액트는 오직 View 만 담당한다.
그래서 리액트는 third-party 라이브러리(ex. Rect-router, Redux) 를 함께 사용한다.


Why React?

위에서 살펴본 3가지의 프레임워크/라이브러리 중 React를 사용해 개발을 하게 된 이유와 리액트의 장점에대해 정리! 💡

1. 생태계활성화

페이스북의 지속적인 관리와 함께 리액트를 이용하는 개발자가 많아 생태계가 활성화되어있다. 그렇기 때문에 다양한 자료들이 있으며 이미 여러 사람들이 올려놓은 논의들을 이용해 원활한 문제해결을 기대해볼 수 있다.

2. 가상돔(Virtual Dom)

리액트의 가상돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산해 빠르게 업데이트해준다. 덕분에 불필요한 UI 업데이트는 줄이고 성능은 좋아질 수가 있었다.

3. 재사용성

리액트에는 재사용가능한 UI의 최소단위인 Component 가 있다. 컴포넌트를 이용해서 요소들을 재사용할 수 있게 되었고 복잡한 코드를 컴포넌트 단위로 분리할수 있게 되어서 코드를 알아보기 쉽게 된다는 장점도 생긴다!

4. React Native

React Native 으로도 계속 리액트의 사용자가 증가하고 있으며, 리액트를 배운 뒤 리액트 네이티브를 배워서 앱개발도 해볼 수 있어서 좋다!



React 작업 환경 설정 🔧

1. Node.js

Node.js자바스크립트가 브라우저 밖(ex. 서버)에서도 동작하게 하는 환경을 의미한다.

🤔 근데 리액트 애플리케이션은 어차피 웹 브라우저에서 실행이 되는데 왜 Node.js가 필요한걸까?
→ 아까 위에서 Angular, Vue, React 의 설명에서 React는 나머지 둘과 다르게 MVC에서 View 만 담당한다고 했었다. 그래서 따로 개발환경을 구축해줘야 하는데 이 프로젝트 개발환경을 구축하는데 필요한 주요 도구들이 바로 Node.js 기반이기 때문이다!


2. npm

npm(node package manager)는 Node 기반 패키지를 사용하기 위한 패키지 매니저 도구이다. Node.js를 설치하면 자동으로 설치되며 이 npm을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있다.


3. CRA(Create-React-App)

CRA리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구이다.
다시한번 말하는거지만 리액트는 UI 기능만 제공하기 때문에 개발자가 직접 구축해야하는 것들이 굉장히 많다. 그래서 처음 개발하는 단계에서는 직접 개발환경을 구축하기 어려울 수 있으므로 CRA 명령어를 이용해 쉽게 리액트 개발환경을 구축하는 방법을 사용한다! 👏🏻



Crate-React-App

1. CRA Setting


2. CRA 기본 폴더 및 파일 구성


2-1. node.modules - package.json - .gitignore

① node.modules

CRA 를 구성하는 모든 패키지 소스 코드가 존재하는 폴더이다. 폴더를 열어보면 그 안으로 또 정말 많은 폴더들과 파일들이 있어서 많이 무겁다. 그렇기 때문에 이 폴더는 나중에 .gitignore 를 이용해서 깃허브에 올라가지 않도록 처리해준다.


② package.json

CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지들의 정보(종류, 버전)가 기록되는 파일이다.

  • 모든 프로젝트마다 package.json이 하나씩 존재한다.
  • "dependencies" 부분을 보면 리액트를 사용하기 위한 모든 패키지 리스트와 버전을 확인할 수 있다.
  • 새로운 라이브러리(or 패키지)를 설치하게 되면 또 이 dependencies에 추가되며, 자동으로 추가되지 않을 때도 있다.
  • 그래서 --save 를 붙여서 dependencies에 확실하게 추가되도록 하는방법을 권장한다!

🤔 그런데 왜 node.moules에 있는 파일들을 이중으로 또 package.json에 정리할까?
① node.modules 에서 말했던 것처럼 무거운 용량때문에 .gitignore 에 추가해서 깃허브에 올라가지 않도록 했기때문에 다른 사람들이 이걸 다시 깃허브로부터 받아올 때 어떤 라이브러리, 패키지가 이용됐는지를 알 수 있는 방법이 필요하다. 그래서 이때 사용되는게 package.json 으로, 다른 사람이 npm install 만 입력하면 자동으로 이곳에 기록된 패키지들을 설치해준다.


③ .gitignore

.gitignore 파일에 작성된 폴더와 파일은 push 를 해도 깃허브에 올라가지 않는다!



2-2. index.html - index.js - App.js

① index.html

CRA 로 세팅된 환경에는 html 파일은 단 한개 뿐이다! public 폴더에 들어있으며, 이 파일이 index.html이다. 이곳에는 id가 root인 div 태그가 있다.

<div id="root"></div>

② index.js

src 폴더에는 index.js 가 있다. 이곳이 React가 시작되는 곳이다.

ReactDom.render(<App />, document.getElementById('root'));
  • Dot notation으로 접근한걸 보니 ReactDom은 객체라는것을 알 수 있다. 👀
  • ReactDom의 render 메소드를 통해 2개의 인자를 전달하며, 각 인자는
    <App />document.getElementById('root') 이다.

🤚🏻 첫번째 인자로 전달하는 <App /> 컴포넌트를 → 두번째 인자로 전달한 document.getElementById('root') (=index.html에 들어있었던 id가 root인 div 태그) 이곳에 띄워주는 렌더 메소드이며, 여기서 index.html과 index.js가 연결된다.


③ App.js

  • 현재 화면에서 보여지고 있는(빙글빙글 돌고있는 리액트로고) 초기 컴포넌트이다.
  • 각각 내가 작업할 컴포넌트로 대체해주면 된다. ex. <Login /> <Main /> ...
  • React Router를 배운 후에는 <Routes /> 컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.
profile
Becoming a front-end developer 🌱

0개의 댓글