React | What is React?

Why React?

웹의 규모가 커지면서 동시접속자 수와 데이터의 양이 폭발적으로 증가했고, 이 결과로 웹 3세대의 시대가 도래하게 된다. 이러한 흐름속에서 기존의 DOM, jQuery만으로는 새로운 웹 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌다.

규모가 커지고 복잡해진 웹 애플리케이션의 데이터 관리 / 코드 유지 보수를 편리하게 하기 위해 다양한 Frontend Framework 및 Library가 등장한다. React는 이 중 Frontend Library에 해당한다.

 

What is React ?

- 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리
- 컴포넌트 단위로 이루어진 UI 라이브러리

 

위 단어에서 생소하게 느껴졌던 단어, 라이브러리와 컴포넌트
아래로 각각 정리해본다.

 

프레임워크 vs 라이브러리

프레임워크

• 다른 사람들이 만들어놓은 코드 안에 내가 들어가는 것
• 집의 구조/철제물이 완성된 완성품
• 다양한 기능들이 한 번에 묶어져서 제공이 되므로 정해진 골격 안에서 원하는 기능을 구현해야 함
• 배우는 데 시간이 오래 걸림
• ex. 앵귤러

라이브러리

• 다른 사람들이 만들어놓은 것을 내가 가져와서 쓰는 것
• 우리가 원하는 재료들을 골라서 입맛에 맞게 집을 지을 수 있음.
• 작은 단위, 작은 도메인 안에서 자신의 원하는 작은 부분을 구현. 따로 정해진 골격이 없다.
• 배우는 시간이 상대적으로 짧다.
• ex. 리액트

 

Component

한 가지의 기능을 수행하는 UI 단위

구조

• 데이터를 가진 state
• 사용자에게 어떻게 보여줄 지를 결정하는 render 함수
  (상태가 변할 때마다 render 함수가 호출된다.)

특징

• 독립적이고 재사용이 가능하다.
• 최상위의 컴포넌트 : Root
• 리액트 내부에 가상돔(Vitrual Dom)이 있어 UI를 빠르게 업데이트한다.
  가상돔(Virtual Dom)
  : 이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술

 

JSX

리액트에서 사용하는 자바스크립트 확장 문법

특징

• HTML마크업 + JS로직구현을 함께 할 수 있다.
• 상단에 자식 태그들을 감싸는 하나의 부모 태그가 필요하다.
• Self closing이 가능하다.
• camelCase property (ex.className)

사용법

• JS코드를 기재할 땐 겉에 { }로 감싸주어야 한다.
• JSX 안에서 컴포넌트를 표시할 땐 대문자로 시작하게 적어야한다.

 

Settings

Node.js

크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임.

웹 브라우저 환경이 아닌 곳에서도 자바스트립트를 사용할 수 있도록 도와준다.

리액트 프로젝트에 필요한 주요 도구들이 Node.js를 사용해 설치가 필요하다.

예를 들어 babel (ECMAScript 6를 호환시켜줌), webpack(모듈화된 코드를 한 파일로 합치고,

코드를 수정할 떄마다 웹 브라우저 리로딩 등)이 있다.

 

npm

Node.js를 설치하면 함께 설치되는 Node.js 패키지 매니저 도구.

npm은 수많은 개발자가 만든 패키지를 설치하고, 그 패키지의 버전을 관리할 수 있도록 해준다. (리액트도 패키지 중의 하나이다)

 

CRA

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구(toolchain)
여러 파일이 생성되는데, 그 중 특히 생소했던 파일 몇 개를 추려서 정리해본다.

• node.modules
  : CRA를 구성하는 모든 패키지 소스 코드
  
  
• package.json'dependency : 패키지 이름/버전' 이 중요
  : 프로젝트에 대한 정보를 담고 있는 파일
  
  
• gitignore
  : git에 올리고 싶지 않은 파일

---

본 글은 2021년 8월 21일 개인 블로그(velog)에 작성된 글입니다.