React가 무엇이고, 왜쓰는지?

안녕하세요

 

오늘은 리액트에 관하여 포스팅을 해보겠습니다.

우선 리액트는 메타에서 개발한 오픈 소스 자바스크립트 라이브러리입니다.

이 라이브러리는 사용자 인터페이스를 만들기 위해 사용됩니다.

 

React는 페이스북에서 만든 프론트엔드 라이브러리로, 사용자 UI를 만들기 위한 자바스크립트 라이브러리입니다.

React는 UI를 컴포넌트 단위로 만들기 위한 컴포넌트 라이브러리인데 이것을 자바스크립트를 이용해서 만듭니다.

React에서 Component란 특정 기능을 담당하는 독립적인 기능 블록입니다.

웹페이지의 헤더, 푸터, 네비바와 같이 HTML/CSS로 만들고, 자바스크립트로 기능을 넣은
특정 UI를 따로 떼어낸 것이고,
이 특정 UI를 모듈화를 시킨 것입니다.

 

즉 React는 HTML 요소를 컴포넌트화하고, 이 컴포넌트들의 조합으로 UI를 구성 웹/앱을 구현하기위해 
사용하는 자바스크립트 라이브러리입니다.

 

React의 장점으로는,

1. 생산성/재사용성

컴포넌트 기반 아키텍처는 일반적으로 일체형 UI에 비해 재사용과 유지보수, 확장이 용이합니다.
예를들어 컴포넌트화를 시킨 상태라면. 특정 컴포넌트만 수정하면, 이 컴포넌트를 사용하는 
모든 페이지들에도 수정사항이 변경되므로 유지보수에 용이한것이다.
버튼과 같이 모든 페이지에서 사용하는 UI 요소이면, 기본적인 뼈대를 구성하여 컴포넌트화
시켜두면 버튼이 필요한 페이지에서 해당 버튼을 커스터마이징해서 상황에 따라 유연하게 확정하여
사용할 수 있다.

 

2. 빠른 UI 업데이트

React는 가상 DOM 이라는 기술로 효율적이고 빠른 UI 변경을 지원합니다.

가상 DOM은 가상의 Document Object Model을 말하고, React는 가상 DOM을 사용하여 브라우저에 이미
반영된 뷰와 새로운 뷰의 차이점을 찾아냅니다.

화면의 요소가 변경되어야하면 React는 가상 DOM에 그변화를 적용하고 현재 브라우저와 실제DOM의
차이를 계산하여 그차이 만큼 한번에 변경하여 리렌더링 합니다.

결과적으로 React는 딱 상태가 변경된 부분만을 갱신하여 내부 상태(가상DOM)와 View(실제DOM)을 같게 만듭니다.

 

3. 풍부한 라이브러리

React는 전세계적으로 커뮤니티활동이 이어지고있어 많은 자료 오픈소스 라이브러리 등이 공유되고있습니다.
이러한 개발 환경으로 개발자에게 편의성과 코드를 짧고 효율적으로 작성할 수 있는 간결성이라는 이점을 부여합니다.

 

React의 단점

1. 느린 첫 로딩속도 낮은 검색 노출
React는 처음 렌더링 하는 속도가 느리고 구글 같은 엔진에 노출되기가 어렵다. 이 두 단점이 사이트의 수익성 부분에서
많이 치명적이라고 합니다.

2. 상태 관리 복잡도

React는 컴포넌트 상태를 나타내는 State라는 개념이 있는데, 가상 DOM에서 바뀐 부분을 찾아
그 부분을 업데이트 한다는 것은 State가 바뀐 부분을 찾는다는것인데
React에서 상태 관리가 생각보다 매우 어렵다고합니다.

웹사이트 규모가 커지면 상태 관리를 위해 Redux,Recoil과 같은 상태 관리 라이브러리를 사용한다고 하는데
공부해보고 포스팅 해보아야겠다.