[리액트] 리액트란? / 리액트 장점 단점

리액트란

리액트는 메타 (구 페이스북)에서 만든 오픈 소스로 자바스크립트 라이브러리입니다.

리액트를 이용하면 상호작용이 많은 사용자 인터페이스 UI를 보다 쉽게 만들고 성능을 아끼면서 최적의 사용자 경험을 제공할 수 있습니다.

 

Component

리액트에는 컴포넌트 component 라는 선언체가 있는데, 컴포넌트가 최초로 실행한 '초기 렌더링'에서 데이터가 변경되면 해당 컴포넌트만 효율적으로 갱신하고 리렌더링 하는 방식으로 애플리케이션을 View에 집중하여 UI 구현을 쉽게 설계할 수 있도록 하고 있습니다. 

컴포넌트는 재사용 가능한 API로 다른 프레임 워크 템플리의 HTML 태그를 문자열로 반환하는 형식과 다릅니다. 

 

DOM 조작 최소화

리액트는 Virtual DOM 방식을 사용하여 실제 DOM에 바로 접근하여 조작하지 않고,

실제 DOM과 리액트가 생성한 가상의 돔을 비교하여 바뀐 부분만 확인해 실제 DOM에 적용합니다.

 

업데이트 과정 간소화

지속적으로 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 개발된 라이브러리인 만큼 업데이트 처리 과정에서 생기는 복잡함을 간소화 시킬 수 있습니다. 그러나 해당 이슈가 없는 간단한 작업의 경우에는 사용하지 않는 편이 더 효율적일 수 있습니다. 

 

리액트 장점

1. 선언형 뷰는 정해진 규칙에 따라 코드 예측을 가능하게 돕기 때문에 디버그*하기 쉽다.

2. 컴포넌트를 이용하여 기존의 것을 버리고 새로운 규칙을 생성해서 간편하게 수정 및 재사용이 가능하다.

3. 컴포넌트 로직은 Java Script로 작성되기 때문에 리액트 네이티브 React Native*를 이용하면 IOS와 안드로이드를 모두 지원하는 어플리케이션을 동시에 개발할 수 있다.

4. 다른 웹 프레임워크나 라이브러리와 혼용이 가능하다. (Backbone.js, AngularJS 등)

5. 동시에 개발 가능하기 때문에 시간 단축과 인력 단축이 가능하다.

리액트 단점

1. 외부 라이브러리가 부족하기 때문에 복잡한 설정은 따로 구현해야 하므로 시간과 비용이 더 많이 들 수도 있다. 

2. view에 집중하므로 다른 프레임워크가 내장하고 있는 Ajax, 데이터 모델링, 라우팅 등의 기능은 다른 라이브러리를 이용해야 한다. (여러 라이브러리를 이용해야 한다.)

• 라우팅 - 리액트 라우터 (react-router)
• Ajex 처리 - axios 또는 fetch
• 상태관리 - 리덕스(redux) 또는 MobX

3. 간단한 프로젝트 작업의 경우에는 리액트를 사용하는것이 더 비효율적 일 수 있다. 

 

* 디버그 : 오류나 버그를 찾아내어 그 원인을 밝히고 수정하는 작업 과정

* React Native : 메타(페이스북)에서 개발한 모바일용 자바스크립트 라이브러리

 

 

참고 : 리액트를 다루는 기술, 저자 : 김민준 | 리액트 공식 홈페이지 -  https://reactjs.org/

 

 

---

* 잘못된 정보 및 오류가 있을 경우 댓글에 적극적으로 말씀 부탁드립니다. 수정, 보완 하겠습니다.