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

JS가 브라우저 밖에서도 동작하게 하는 실행환경

npm

package : node로 실행할 수 있는 어플리케이션

CRA

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

• node.modules

  : CRA를 구성하는 모든 패키지 소스 코드

• package.json

  : 프로젝트에 대한 정보를 담고 있는 파일

  'dependency : 패키지 이름/버전' 이 중요

• gitignore

  : git에 올리고 싶지 않은 파일
  

---

본격적으로 React 공부를 시작하기 전에 그래서 이게 왜 쓰이기 시작한 건지, 어떤 특징을 가지고 있는지 알고 시작하는 것이 중요하다고 생각했다. 간단히나마 개념을 정리해보았으니 이젠 기쁜 마음으로 React에 발을 푹 담구어 보자 🎉