리액트 | 리액트란? 웹앱(Web/App)이란?

 

웹/앱 (Web-app)

• Sns, 쇼핑몰 등 요즘 웹사이트들은 마치 앱처럼 페이지 새로고침 없이 화면이 바뀜. 이렇게 앱이랑 사용성이 비슷한 웹을 ‘웹/앱’이라 칭함
• 이러한 웹/앱을 만들 때 가장 유용하게 쓰일 수 있는 라이브러리가 리액트, 앵귤러, 뷰
• 이러한 사이트들은 앱처럼 만들어놨기 때문에 앱으로의 발행이 쉬움
• 사용자에게 긍정적인 느낌을 주는 것이 가장 큰 장점
  • 빠르다는 느낌을 줌
  • 앱처럼 뛰어난 UX로 구매전환율 상승
  • 보통 웹사이트보다 비즈니스적 강점 상승

 

---

 

리액트

• 웹 프레임워크로 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됨.
• 사용자의 조작에 따라 사용자 인터페이스가 동적으로 변화하는 웹 애플리케이션을 개발할 수 있게 해 주는 프론트엔드 라이브러리이다.
• 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발.
• 앵귤러(angular)가 웹 애플리케이션 개발에 필요한 다수의 기능을 제공하는 것과는 대조적으로, 리액트는 UI 기능만 제공한다. 따라서 전역 상태 관리, 라우팅, 빌드 시스템 등을 각 개발자가 직접 구축해야 한다.
  • 전반적인 시스템을 직접 구축할 수 있으니 각자의 환경에 맞게 최적화할 수 있다.
  • 반대로 신경 쓸 것이 많기 때문에 초심자에게는 높은 진입 장벽이 되기도 한다. ( 리액트 팀에서는 리액트 진입 장벽을 낮추기 위해 create-react-app을 만들었다. create-react-app을 이용하면 리액트를 처음 사용하는 사람도 하나의 명령어로 리액트 개발 환경을 구축할 수 있다.)

 

 

프론트엔드 라이브러리 또는 프레임워크를 사용하는 이유

• UI를 자동으로 업데이트해 준다.
• 데이터의 변화를 화면에 적용하기 쉽다.
• 컴포넌트화 하기 쉽다.

 

---

 

리액트의 주요특징

1. JSX (JavaScript XML)

• XML같은 문법을 사용하는 ECMAScript의 확장이다.
• HTML과 모습이 비슷해 보이는 JSX는 수많은 개발자들에게 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다.
• 다른 프레임워크들이 HTML 마크업 기반으로 그 위에 템플릿 문법을 추가해 컴포넌트의 구조와 구성요소를 정의하는 반면, React는 XML 포맷의 템플릿을 직접 자바스크립트에 내장시키는 형태로 JSX 기술을 주력으로 사용하는 것을 권장하고 있다. 그렇기 때문에 다른 프레임워크에 비하여 더 자바스크립트에 집중된 형태의 컴포넌트가 나타나게 된다.

2. Component

• 스테이트풀 컴포넌트 : 상태를 컴포넌트를 통해 값을 보관하며 props를 통해 차일드 컴포넌트로 전달할 수 있다.
• 속성과의 단방향 데이터 바인딩 : 보통 props라 불리는 속성들은 부모 컴포넌트로부터 컴포넌트에 전달된다. 컴포넌트들은 props를 하나의 불변의 값(자바스크립트 객체)들로 받는다.
  • 데이터 바인딩은 모델(비즈니스 로직)과 뷰(UI) 간에 데이터를 동기화하는 프로세스다. 기본적으로 단방향과 양방향이라는 두 가지 구현방식이 있다. 두 방법의 차이는 모델-뷰(Model-View) 업데이트 처리 방식이다.
  • 양방향 데이터 바인딩은 뷰가 변경되면 모델도 변경되며 모델이 변경되면 뷰도 변경되는 처리방식.
  • React는 단방향 데이터 바인딩을 사용한다. 모델이 변경되면 뷰가 변경되는 방법만을 허용하고, 뷰가 변경된 경우 모델을 변경시키지 않는다. 뷰가 변경된 경우 모델을 변경하는 코드를 작성해야 한다. 단방향 데이터 바인딩은 일반적으로 예측 가능성이 높기 때문에 코드가 더 안정적이지만, 양방향 바인딩에 비해서 코드 작성시간이 더 필요하다. ( Angular와 Vue.js는 단방향 데이터 바인딩과 양방향 데이터 바인딩 모두 지원 )

 

3. Virtual Dom

• Virtual Dom은 브라우저의 작동 원리에 의해 발생하는 비효율적인 부분을 최소화하기 위해 탄생했다. Virtual DOM은 어떤 게 바뀌었는지, 어떤 게 바뀌지 않았는지 자동으로 파악하여 필요한 DOM 트리만 업데이트할 수 있게 해준다.
• 인 메모리 데이터 구조 캐시를 만들고 결과 차이를 계산한 다음 브라우저에 표시되는 DOM을 효과적으로 업데이트한다.
• 이로써 프로그래머는 마치 모든 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있는데, 실제로 리액트 라이브러리는 단지 실제로 변경되는 하위 컴포넌트만을 렌더링할 뿐이다.
• 전통적인 DOM은 한 요소에서 변경이 발생하더라도 전체 트리구조를 업데이트하기도 한다. 따라서 렌더링 성능이 떨어질 수 있는 불안요소가 있다. 가상 DOM은 변경사항을 추적하여 전체 트리의 다른 부분에 영향을 주지 않기 때문에 불필요한 UI 업데이트가 줄어든다.
  • 때문에 일반적으로 가상 DOM이 실제 DOM을 조작하는 것에 비해 성능이 뛰어나다고 볼 수 있다. (하지만 Angular는 실제 DOM 위에서 동작함에도 변경감지 구현 기능이 따로 존재하여 성능을 높이고 있다는 것을 참고하자. )

 

 

리액트의 제약 사항

리액트는 함수형 프로그래밍을 적극적으로 활용한다는 특징이 있다. 리액트에는 다음과 같은 제약 사항이 있다. 순수 함수와 불변 객체는 함수형 프로그래밍에서 자주 언급되는 개념이다.

• 렌더 함수는 순수 함수로 작성해야 한다.
• 컴포넌트 상탯값은 불변 객체로 관리해야 한다.

앞의 공식에서 render 함수는 순수 함수여야 하므로 인수 state가 변하지 않으면 항상 같은 값을 반환해야 한다. 그리고 컴포넌트의 상탯값을 수정할 때는 기존 값을 변경하는 게 아니라 새로운 객체를 생성해야 한다.

코드에서 순수 함수와 불변 객체를 적극적으로 사용하면 복잡도가 낮아지고, 착지 힘든 버그가 발생할 확률이 줄어든다. 리액트에서는 이 두 제약 사항 덕분에 렌더링 성능을 크게 향상할 수 있다.

 

 

 

 

---

[ 참조 ]

• 🔗 리액트 - 위키백과
• 🔗 리액트(라이브러리) - 나무위키
• 🔗 유튜버 코딩애플
• 🔗 삼성 인사이트 리포트
• 📚 실전 리액트 프로그래밍 (저자 이재승)