리액트(React.js)란 뭘까? 왜 리액트(React.js)를 사용할까?

리액트(React.js)란 뭘까? 왜 리액트(React.js)를 사용할까?

📖 들어가며

리액트는 자바스크립트 라이브러리 중 하나로 웹사이트 개발 시 많이 사용되는 언어입니다.

특히 최근들어 많은 사람들이 관심을 가지고 있고, 실제로 회사에서도 적극적으로 활용되고있는 추세죠.

이번 포스팅에서는 리액트가 어떤 특징을 가지고 있는지 알아보고자 합니다.

리액트(React.js)는 무엇일까 ❓

React.js는 특히 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다.

 

React는 Facebook에서 일하는 소프트웨어 엔지니어 jordan walke가 처음 만들었습니다.

 

웹 및 모바일 앱의 view layer를 처리하는 데 사용됩니다.

 

데이터 바인딩 기법을 통해서 여러가지 정보를 한 곳에 모아서 보여줄 수 있고, 뷰포트 개념을 도입했기 때문에 스크롤링 효과 등 시각적인 부분에서의 표현이 자유롭습니다.

 

SPA (Single Page Application)방식이라 페이지 이동없이 빠르게 콘텐츠를 제공할 수 있다는 점도 매력적이죠.

또한 React를 사용하면 재사용 가능한 UI 구성 요소를 만들 수 있습니다.

 

React를 사용하면 개발자가 페이지를 다시 로드하지 않고도 데이터를 변경할 수 있는 대규모 웹 애플리케이션을 만들 수 있습니다.

리액트(React.js)의 기능은 무엇일까 ❓

React의 몇 가지 중요한 기능을 자세히 살펴보겠습니다.

React.js 속성에는 다음이 포함됩니다.

• 선언적입니다.
• 간단합니다.
• 구성요소 기반입니다.
• Server Side를 지원합니다.
• 광범위합니다.
• 빠릅니다.
• 배우기 쉽습니다.

JSX

React에서는 템플릿에 일반 JavaScript를 사용하는 대신 JSX를 사용합니다.

 

JSX는 HTML 인용을 허용하고 이러한 HTML 태그 구문을 사용하여 하위 구성 요소를 렌더링하는 간단한 JavaScript입니다.

 

HTML 구문은 React Framework의 JavaScript 호출로 처리됩니다. 또한. 순수한 오래된 JavaScript로 작성할 수도 있습니다.

React Native

• React에는 2015년 Facebook에서 발표한 네이티브 라이브러리가 있습니다.
• IOS, Android 및 UPD와 같은 네이티브 애플리케이션에 반응 아키텍처를 제공합니다.
• Javascript만을 사용하여 프레임워크를 구축하는 모바일 앱입니다.
• React와 동일한 디자인을 사용하므로 풍부한 모바일 UI 라이브러리/선언적 구성 요소를 활용/포함할 수 있습니다.
• 일반 iOS 및 Android 앱과 동일한 기본 UI 빌딩 블록을 사용합니다. react-native를 사용하는 가장 좋은 점은 Objective-C, Java 또는 Swift로 작성된 구성 요소를 허용/채택하는 것입니다.

단방향 데이터 흐름

React에서는 변경할 수 없는 값 세트가 HTML 태그의 속성으로 구성 요소 렌더러에 전달됩니다.

구성 요소는 속성을 직접 수정할 수 없지만 수정할 수 있는 콜백 기능을 전달할 수 있습니다.

이 완전한 프로세스는 속성이 아래로 흐릅니다.

가상 문서 객체 모델

React는 변경 사항을 계산한 다음 브라우저를 업데이트하는 메모리 내 데이터 구조 캐시를 만듭니다.

 

프로그래머가 각 변경 사항에 대해 전체 페이지가 렌더링되는 것처럼 코딩할 수 있도록 하는 특수 기능을 허용하는 반면 반응 라이브러리는 실제로 변경되는 구성 요소만 렌더링 합니다.

 

Virtual DOM으로 인해 우리가 스마트폰 앱을 사용하는 것처럼 웹 페이지에서도 앱 같은 빠른 화면 전환과 같은 좋은 사용자 경험을 줄 수 있습니다.

 

아래 영상은 어떻게 작동되는지, React Virtual DOM에 대해서 이해하기 쉽게 만들어진 영상입니다.

 

이제 우리 앞에 놓인 주요 질문은 React를 사용해야 하는 이유입니다.

Vue, Angular와 같이 프론트엔드 웹 애플리케이션 개발을 더 쉽게 만들어주는 오픈 소스 플랫폼이 너무 많습니다.

다른 경쟁 기술이나 프레임워크에 비해 React의 이점에 대해 간단히 살펴보겠습니다. 

매일 변화하는 프론트엔드 환경에서 새로운 프레임워크를 배우는 데 시간을 할애하기가 어렵습니다.

특히 해당 프레임워크가 궁극적으로 막다른 골목이 될 수 있는 경우에는 더욱 그렇습니다.

반응형

왜 리액트(React.js)일까 ❓

단순성

ReactJS는 바로 이해하기가 더 쉽습니다. 

일반 JavaScript만 사용하면 React를 매우 간단하게 배우고 전문 웹및 모바일 응용 프로그램을 개발할 수 있습니다.

React는 HTML과 JavaScript를 혼합할 수 있는 JSX라는 특수 구문을 사용합니다. 이것은 요구 사항이 아닙니다.

개발자는 여전히 일반 JavaScript로 작성할 수 있지만 JSX는 사용하기가 훨씬 쉽습니다.

배우기 쉬움

JavaScript 대한 기본 지식이 있는 사람이라면 누구나 React를 쉽게 이해할 수 있지만 Angular와 Ember는 'Domain-specific Language'라고 하여 배우기 어렵다는 의미입니다.

대응하려면 CSS와 HTML에 대한 기본 지식만 있으면 됩니다.

네이티브 접근

React는 모바일 애플리케이션을 만드는 데 사용할 수 있습니다(React Native). 그리고 React는 재사용성에 대한 매우 좋습니다.

즉, 광범위한 코드 재사용성이 지원됩니다. 따라서 동시에 IOS, Android 및 웹 응용 프로그램을 만들 수 있습니다.

데이터 바인딩

React는 단방향 데이터 바인딩을 사용하고 Flux라는 애플리케이션 아키텍처는 디스패처라는 하나의 제어 지점을 통해 구성 요소로의 데이터 흐름을 제어합니다.

대형 ReactJS 앱의 자체 포함 구성 요소를 디버그 하는 것이 더 쉽습니다.

성능

React는 종속성을 위한 내장 컨테이너 개념을 제공하지 않습니다.

Browserify, Require JS, Babel, ReactJS-di를 통해 사용할 수 있는 EcmaScript 6 모듈을 사용하여 종속성을 자동으로 주입할 수 있습니다.

테스트 가능성

ReactJS 애플리케이션은 테스트하기가 매우 쉽습니다.

React 보기는 상태의 함수로 처리될 수 있으므로 ReactJS 보기에 전달한 상태로 조작하고 출력 및 트리거 된 작업, 이벤트, 함수 등을 살펴볼 수 있습니다.

 

참고:

https://www.c-sharpcorner.com/article/what-and-why-reactjs