React

Jquery의 한계

다루어야 할 데이터가 많고 동적 api 요청이 많은 페이지면 많은 직접적인 DOM 조작으로 인해 코드가 복잡해져 실수를 유발하고 성능 또한 느려졌다.

React는 Component 기반으로 화면을 구성하여 효율적인 코드 분리를 통해 생산성과 재사용성을 높일 수 있기 때문이다. Virtual DOM 또한 매력적으로 느껴진다.

React란?

페이스북에서 제공하는 컴포넌트 기반 라이브러리
프론트엔드 라이브러리 중 하나인데 아래 특징들을 보면서 리액트가 무엇인지 파악 하는게 좋을 것 같다.

React 특징

• 선언적이다

  • 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만든다.
  • 명령형 프로그래밍 : 어떻게에 집중

  • const double = (arr) => {
      let results = [];
      for (let i = 0; i < arr.length; i ++) {
        results.push(arra[i] * 2);
      }
      return results;
    }```

  • 선언형 프로그래밍 : 어떤것에 집중

  •   const double = (arr) => {
      return arr.map((elem) => elem * 2);
    }```
      

• Virtual DOM

  • 데이터의 변화가 일어나면 Virtual DOM에 우선 적용하여, 변경이 필요한 DOM만 변경이 일어난다.(그 과정에서 연산 비용이 들거라 생각하지만, 렌더링하는 비용보다 적다.)

• 컴포넌트

  • ex : 헤더,메인,버튼,메뉴를 하나의 컴포넌트로 관리. 유지보수가 편하고, 재사용성이 증가

• 단방향 데이터 바인딩

  • 데이터 흐름을 단방향으로 제한함으로서 데이터를 추적하기 쉽고 디버깅을 쉽게 해줌
  • Props : 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터. 변경 불가
  • State : 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야 하는 것과 같이 동적인 데이터를 다룰 때 사용

• JSX

  • js+xml 합쳐서 만들어진 기존 자바스크립트의 확장 문법. 가독성 좋음. 필수는 아니나 사용 권장

장점

• JavaScript 객체 형태의 Virtual DOM 을 사용하여 어플리케이션의 성능을 향상시킴
• 공식 문서 가이드와 방대한 커뮤니티, 자료들
• 컴포넌트 단위 구성으로 재사용성, 가독성, 생산성 높음
• 프레임워크가 아닌 라이브러리이기 때문에 다른 프레임워크와 혼용 가능

단점

• IE8 이하 지원하지 않음
• Javascript,Jquery 보다 더 많은 학습이 필요(개인적인 생각)

React는 단순 라이브러리, 필요한 것들

• node.js : Chrome V8 Javascript 엔진으로 빌드된 Javascript 런타임

  • 다양한 자바스크립트 애플리케이션을 실행. webpack,babel등 사용을 위해 설치

• npm : node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소. 개발에 필요한 다양한 모듈들을 다운(node.js를 설치하면 같이 설치)

• Create React App : 복잡한 설정없이 React 개발 환경 구성

런타임 : 프로그래밍 언어가 구동되는 환경
babel : 2015년에 업데이된 ES6를 사용할 때, 이전 문법인 ES5로 변환해주는 변환장치. 바벨을 통해 React를 다양한 브라우저 환경에서 실행이 가능해짐