TIL | 20 React 시작하기

Soojong Kim·2021년 6월 25일

React를 사용하는 이유? 💻

기존에 HTML, CSS, JS를 이용해 코드를 짜게되면

<html>
 <head>
   <link...>
 </head>
   <body>
     <div>...</div>
	  ...
     <script...>
  </body>
</html>

이런식에 코드를 짜게되지만, 웹이 발전하면서 그 구조가 점점 복잡해지고 코드수가 점점 많아지면서 유지보수의 중요성이 커지게 되고 코드를 보면서 어떤 코드에 문제가 생겼는지 확인하려면 수많은 코드를 확인해야하고 다양한 UI/UX가 점점 중요해지면서 이전에 사용했던 방법(DOM, jQuery)로는 코드를 유지보수하는게 어려워졌다.

또한 라이브러리 객체끼리 이름이 같아 충돌할 수도 있고 관리하기도 어려워졌는데 React를 사용하면 이런 문제들을 해결할 수 있게 되었다.

Framework ? Library? 뭐가 다른데?

Angular : TypeScirpt 기반으로 안정적이고 탄탄한 개발이 장점이다. 다양한 기능이 내장되어 있어 무겁다는 단점이 있다.
Vue : 가장 마지막에 생겼지만 코드가 깔끔하고 배우기 쉽다는 장점이 있어 성장속도가 빠르다.
React : 페이스북에서 개발하고 관리하는 UI를 만들기 위한 JS기반 라이브러리이다. Angular, Vue와는 다르게 내장되어 있는 기능이 부족해 third-party 라이브러리(ex: React-router, Redux)를 함께 사용한다. 페이스북의 지속적인 관리로 많고 다양한 자료와 수요/공급의 균형으로 활성화 되어있다.
즉, Angular와 Vue는 Framework이고 React는 Js기반 라이브러리이다.

Node & NPM?

JavaScript는 처음에 브라우저에서만 실행되는 언어였지만, 웹이 점점 발전하면서 그 속도에 따라 JavaScript 성장에 가속도가 붙기 시작했고 많은 사람들이 Js를 웹 개발 말고도 다른 곳에서도 사용할 수 있지 않을까? 라는 이야기가 나오기 시작했고 자체적으로 프로그램을 만들어 실행할 수 있도록 나온 기술이 node.js 이다. 브라우저 밖 즉, 서버에서 동작하게 하는 환경을 의미한다.
node와 같이 따라오는 친구가 npm(node package manager) 인데 말 그대로 패키지(외부 라이브러리)를 관리해주는 저장소 역할을 한다.

브라우저: script를 이용해 외부 자바스크립트 파일을 다운 받는다.
node: 외부 자바스크립트 파일을 npm이 맡아서 관리하고 npm에 한 번에 다 저장해놓은 후 관리한다.

React를 사용하기전에 node.js를 설치가 필요하고 버전은 LTS(가장 안전한 버전)을 다운받는다.

설치가 완료되면 잘 설치되어 있는지 터미널 환경에서 확인할 수 있다.

node -v
npm -v

CRA (Create-React-App)

리액트를 시작하는데 필요한 개발 환경을 세팅해주는 도구
하나의 명령어로 리액트 개발환경 구축 가능

Component

Component는 React의 핵심 개념이다! 쉽게말해 UI 요소들을 나누어서 컴포넌트로 만들고 그 컴포넌트를 합치는 개념이다. -> 해당 페이지가 어떻게 구성되어 있는지 파악이 쉽다.
Component를 나눠서 개발하게 되면 재활용이 가능하고 유지보수가 편하다는 장점이 있다.

가상DOM

Virtual DOM(가상 돔) 기술은 React의 가장 큰 특징중 하나이다.
DOM이란?
브라우저에서 최종적으로 화면을 그려주는 HTML 결과물
DOM를 조작해서 사용자들은 Interactive한 웹을 볼 수 있다.
브라우저가 DOM을 변환시키기 위해 연산되는 양을 줄이고 빠르게 수행해서 최종적인 결과만 제공하기에 성능을 개선시킬 수 있다.