intro🤔
React란 무엇인지 React를 사용해야하는 이유가 무엇인지에 대해 간단히 정리하고자 합니다.
수 개월간 익힌 기술이지만 정확히 왜 이것을 배워야하고, 많은 기업들이 React를 채택하여 사용하는지에 대해 이해하고 넘어가고자 정리해 보려 합니다.
React란?
React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.
출처: React 공식문서
- 리엑트는 facebook에서 제공하며 사용자 인터페이스 구현을 위한 javascript 라이브러리 입니다.
- 3세대 웹의 등장으로 분리된 프론트엔드, 백엔드 중 UI,UX구현을 위해 프론트엔드 구현에 사용됩니다.
즉 React는 3세대 웹 환경에서 SPA의 인터페이스 구현을 위해 사용되는 라이브러리라고 볼 수 있습니다.
React의 특징
- 선언형 이다.
- 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다.
- React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.
- 컴포넌트 기반
- 스스로 상태를 관리하는 캡슐화된 컴포넌트를 구현할 수 있습니다.
- 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있습니다.
- Virtual DOM
- DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다.
- React는 실제 DOM에 접근하는 대신 이를 추상화간 자바스크립트객체를 추상화하여 사용합니다.
- 가상 돔을 사용한 렌더링은 다음과 같은 이유로 성능에 긍정적인 영향을 미칩니다.
- 1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함
- 2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼리 비교)
- 3. 바뀐 부분만 실제 DOM에 적용이 됨
리엑트는 위와같이 얕은 비교와 일괄 돔 업데이트를 통해 성능 향상을 이끌어 냅니다.
- JSX
- React는
JSX라는 독특한 문법을 가지고 있습니다.JSX는자바스크립트와HTML을 동시에 사용하며, HTML에 자바스크립트의 변수들을 바로 사용할 수 있는 일종의 템플릿 언어(Template language)입니다.
- React는
웹앱 생태계의 트렌트
React는 Angular, Vue.js와 함께 웹 어플리케이션을 구축하기 위해 사용하는 강력한 웹앱 프레임워크 중 하나입니다.. React는 개발자들 사이에서 가장 많은 인기를 받고 있으며 수많은 웹앱이 React를 활용하여 개발되고 있습니다.
출저: Google Trends
React의 장단점
다음으로 소개할 내용은 React의 장단점 입니다.
React의 장점
- facebook에서 지원하며 안정적이고 방대한 오픈 커뮤니티를 구축하고 있다.
- Virtual DOM - Virtual DOM을 통해 반복되는 렌더링 과정을 줄여줌으로써 성능을 향상시킬 수 있다.
- 컴포넌트 기반 아키텍쳐 - 컴포넌트 기반 아키텍쳐를 가지고있으며 재사용 가능한 컴포넌트를 개발함으로써 유지보수를 용이하게 한다.
- 단방향 데이터 흐름 - React의 데이터 흐름은 단방향 데이터 흐름으로 자식 구성 요소가 부모 구성요소에 영향을 미칠 수 없다. 따라서 특정 부분의 변경이 전체 앱의 구조에 영향을 미치지 않아 안정적이고, 쉬운 디버깅과 유지관리의 장점이 있다.
React의 단점
- SEO의 어려움 - SPA 의 단점 중 하나는 SEO에 어려움이 있다. React는 하나의 HTML 파일이 있으며, 랜더링 되기 이전에는 빈 상태의 HTML만 있으므로 검색 엔진에 올라가기에 어려움이 있다.
- IE8 이하는 지원이 안된다. (IE가 지원을 종료하긴 했지만요.)
- view 외 기능들은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기 때문에 JavaScript 배경지식이 부족할 경우애는 사용이 힘들다.
결론
React는 3세대 웹 환경에서 SPA구현의 트렌드로 자리잡은 라이브러리 입니다. React의 특징으로써 장점으로 작용하는 기능하는 부분을 주목하여 익히는것도 중요합니다. 하지만 SEO의 어려움과 같이 극복해 나가야할 단점 역시 SSR과 같은 해결방법을 통해 극복해야할 과제라 생각합니다. 추가적으로 React를 사용하는 프론트엔드 개발자로써 JavaScript에 대한 이해는 반드시 뒷받침 되어야 할것이라 여겨집니다.
