리액트(React)란 무엇일까?

 

 

이번 포스팅부터는 프론트엔드 라이브러리 점유율 1위를 차지하는 React에 대해 다루어 볼 것이다.

오늘은, React가 무엇인지에 대해서만 간단히 알아보도록 하자.

 

---

 

React JS

• 동적 사용자 인터페이스를 만들기 위해 페이스북에서 만든 오픈 소스 Javascript 라이브러리
• 싱글 페이지 어플리케이션에서 사용자 인터페이스를 만들기 위해 사용하는 Javascript 라이브러리
• 쉽게 말해 Javascript의 수많은 문법을 더욱 편하고 효율적이게 사용할 수 있도록 도와주는 라이브러리
• 실사용 점유율이 가장 높은 라이브러리
• React는 단방향 데이터 흐름을 가짐 → 데이터 흐름의 변화 예측 가능
  • 양방향 데이터에 비해 코드의 양이 복잡해질 수 있지만, VDOM으로 보완
• Component 기반 구조
  • React는 UI를 여러 Component로 쪼개어 만듦
  • 한 페이지 내에서 여러 부분을 Component로 만들고 이를 조립하여 화면을 구성
  • 전체 코드를 파악하기 쉽고 유지보수에 용이
  • 높은 재사용성 (하나의 Component를 필요할 때마다 import 해서 사용하면 됨)
  • → 데이터 변경이 잦고 규모가 큰 프로젝트일수록 적합
• VDOM(Virtual DOM)  →  리소스 최소화로 접근 속도와 효율성 향상
  • DOM을 가상화하여 메모리에 보관함으로써 React는 모든 뷰 변경 사항을 가상 DOM에 즉시 반영하여 매우 빠른 속도의 렌더링을 제공함
  • 특화된 diff 알고리즘으로 이전과 기존 가상 DOM 상태를 병렬적으로 비교하여 많은 업데이트 없이 새로운 변경 사항을 적용하는 가장 효율적인 방법을 계산하여 전반적인 성능을 향상시킴
• Props
  • 부모 컴포넌트 →  자식 컴포넌트로 전달해주는 데이터
  • 자식 컴포넌트에서는 props 변경 불가 (최상위 컴포넌트에서만 변경 가능)
• State
  • 컴포넌트 내부에서 선언되고 내부에서 값을 변경
  • 클래스형 컴포넌트에서만 사용 가능 & 독립적
• JSX
  • Javascript + XML
  •  자바스크립트 코드에서 명시적 HTML 구문을 직접 활용할 수 있음
  • 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환
    • 바벨(Babel) : 최신 Javascript 문법을 이전 버전의 문법으로 변환해주어 다양한 브라우저에서 코드 실행 가능
  • Javascript를 확장한 문법으로 React Element를 생성

 

 

 프론트엔드 라이브러리 점유율 1위를 차지하는 React의 개념과 특징을 정리해 보았다.

 

위에서 정리한 여러 특징들 중, VDOM(Virtual DOM)이 React의 핵심 요소라고 볼 수 있다.

웹 브라우저가 웹 사이트의 텍스트 문서를 읽어서 DOM 트리 구조로 바꾸어 클라이언트에게 보여주게 되는데, 웹 개발자들은 사용자의 반응에 따라 이 DOM 트리를 변경하여 웹사이트의 내용을 갱신한다. 하지만, 작은 변화임에도 불구하고 변화가 있을 때마다 전체 화면을 새로 그리는 것은 성능상 좋지 않다. 이러한 한계를 해결하기 위해 React는 Virtual DOM을 도입하였다.

 

Virtual DOM이란, 말 그대로 가상 DOM이다. 실제 DOM의 복사본으로, 웹 개발자들이 변화를 주고 싶은 부분만 Virtual DOM에서 수정하게 된다. React는 Virtual DOM과 실제 DOM과의 차이점을 찾아내어 실제 DOM에 반영하게 된다. React의 이러한 처리 특징은 불필요한 화면의 갱신을 최소화하여 성능을 향상시키므로 많은 개발자들이 사용하는 것이다.

 

 

이제, Node.js에서 React를 사용하는 방법을 알아보자.

• Node.js는 React를 사용하기 쉽게 하는 도구를 내장하고 있음 (Webpack, Babel 등)
• 방법1. CDN 사용
• 방법2. npx create-react-app 프로젝트명

 

위의 2가지 방법 중 하나를 골라서 쓰면 리액트 프로젝트가 만들어진다.

 

 

---

참고

https://modulabs.co.kr/blog/react-library/

https://goddaehee.tistory.com/296