React의 등장 배경 🖼

• 초기 웹은 HTML/CSS, 순수한 JS, DOM, Event를 이용해 페이지를 만들었습니다.
  '초기'라는 단어가 붙은만큼 이후 시간이 지날 수록 웹이 점점 많은 동적인 기능 복잡해지고 DOM에 직접적으로 접근하는것이 번거로워지면서 이를 간략하게 해주는 jQuery가 등장했습니다.

• jQuery는 HTML에서 클라이언트 사이드 조작을 단순하게 해주는 JS Library입니다.
  하지만 이 jQuery를 요즘은 잘사용하지 않습니다.
  속도가 순수 JS보다 빠르지 않고 코드가 단순해서 사용이 쉬웠지만 지속적으로 사용하다 보니 유지보수가 어려워졌다.

• 이러한 이유로 점점 DOM에 접근하는 다양한 라이브러리나 프레임워크가 등장했습니다.
  그 중 하나가 React입니다.

  • 클라이언트 사이드 : 사용자 측에서 수행하는 것들

React란⁉️

• React도 Frontend Framework(Library) 중 하나입니다.
• 2013년 Facebook에서 “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것”을 목표로 개발한 Library입니다.
• 사이트에 들어가면 보여지는 것(UI) 과 할 수 있는 것(UX)가 있습니다. 그 중에서 React는 View만 담당합니다. 즉 보이는 것 User Interface을 만들기위한 JS Library입니다.

React의 특징 🌟

컴포넌트를 사용하여 재사용성이 뛰어납니다.
가상돔(Virtual DOM)기반으로 하기 때문에 가볍습니다.

• Component : 재활용 가능한 UI 구성 단위
• Virtual Dom : 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술 => 불필요한 UI 감소 및 성능 향상
  • React와 관련해 자세한 Component, JSX는 뒤에서 다루겠습니다.

Node.js 🌿

Chrome의 V8엔진을 이용하여 브라우저에서 JavaScript를 해석하듯이 서버에서 JavaScript를 동작할 수 있도록 하는 플랫폼

• Node.js 는 자바스크립트가 브라우저 밖에서도 동작하게 하는 환경
  => 자바스크립트의 "탈웹"
• 프로젝트 개발 환경을 구축하는 주요 도구들이 Node.js 기반입니다.

npm 🛠 (node package manager)

Node 기반의 패키지를 사용하기 위한 패키지 도구

• npm 을 통해 다양한 패키지를 설치하고 버전을 관리할 수 있습니다.

CRA 🛠 (Create-React-App)

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구

• React는 UI 기능만을 제공하기에 개발자가 직접 구축해야하는 것들이 많습니다. 전반적인 스스템을 직접 구축할 수 있으니 원하는 환경에 맞게 최적화할 수 있지만, 반대로 신경쓸 것이 많기 때문에 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려울 수 있다습니다. 이러한 문제를 해결하기 위해서 CRA가 만들어졌습니다.

• CRA는 React로 웹 애플리케이션을 만들기 위한 환경을 제공합니다. CRA를 이용하면 하나의 명령어로 React 개발환경을 구축할 수 있습니다.

• CRA에는 바벨과 웹팩과 같이 React 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 있으며, 테스트 시스템, ES6+ 문법, CSS 후처리 등 거의 필수라고 할 수 있는 개발 환경도 구축해 줍니다.

• 이러한 개발 환경을 직접 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해야 합니다. CRA를 이용하면 개발 환경 세팅을 해주기 때문에 기존 기능을 개선하거나 새로운 기능을 추가했을 때 패키지 버전만 올리면 됩니다.