리액트 공부를 시작하기에 앞서, 이 리액트라는것이 정확히 어떤 것이고 왜 배워야하는지, 어디에 유용한것인지가 궁금했다.
먼저 위키백과에 리액트를 검색해보면 설명이 이렇게 나온다.
-
리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
-
리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.
이렇게만 읽으면 완벽하게 와닿지는 않아서 따로 자료들을 찾아가면서 정리해보았다
1. SPA (Single Page Application)이다.
인스타그램, 네이버 Vibe, Flipkart 말고도 요즘의 여러 사이트들을 들어가면, 페이지의 새로고침 없이 화면전환이 부드럽다는걸 느낄 수 있다.
기존의 웹서비스는 다른 페이지를 요청할때마다 서버로부터 리소스와 데이터들을 받아서 그걸 화면에 렌더링을 하는 방식이었다면, SPA는 한번에 리소스들과 데이터들을 받아서, 그걸 최초에 한번 페이지 전체를 로드하고, 필요한 부분들만 재렌더링이 되는 방식이다.
그렇기 때문에 화면 전환이 부드러워 사용자 환경에 초점이 맞춰져 있다고 할 수 있다.
2. Virtual DOM의 사용
저 SPA를 구현할 수 있는 이유가 리액트는 Virtual DOM을 사용하기 때문이다.
-
가상 돔(Virtual Dom)은 실제 DOM과 같은 내용을 담고 있는 복사본이다. 그리고 이것은 자바스크립트 객체의 형태로 메모리에 저장되어있는데, 실제 돔과는 다르게 브라우저에 직접적으로 접근을 할 수가 없다.
-
그렇기 때문에 화면에 있는 내용을 직접적으로 수정할 수가 없고, 화면을 직접적으로 제어할 수 있게 해주는 API를 제공하지 않는다.
-
가상 돔은 자바스크립트 객체에 불과하기 때문에, 가상 돔을 생성하고 접근하는것은 실제 돔에 접근하고 조작하는거보다 가볍고 빠른 작업이다.
-
리액트에서는 변경 이전의 내용을 담은 가상돔과 바뀐 내용이 담긴 가상돔 총 2개를 가지고 있다.
그리고 그 두개의 가상 돔을 비교해서 정확히 어떤 요소가 변경 된것인지 찾아낸다 (Diffing) -
이 바뀐 요소들을 찾아내고 실제 브라우저에 적용시켜준다. (Reconcilation)
-
리액트는 Batch Update라는 기능이 있는데, 여기서 Batch란 집단, 무리를 의미한다.
Batch Update는 만약에 li태그안에 10개의 요소가 변경이 됐다면 실제 돔을 10번 리렌더링을 해주는 것이 아니라 그 10개의 요소를 한번에 실제 돔에 적용시켜주는 것이다. -
DOM 조작에 있어서 비용이 가장 많이 드는 작업은, 화면에 요소들을 띄어주는 작업이기 때문에 가상 돔을 통한 Batch Update를 통해 효율적으로 브라우저 화면을 리렌더링 할수가 있다.
3. React Native의 사용
나중에 준비가 됐을 때, 도전해보고싶은 프로젝트들이 여러개가 있는데 그 중에서 웹이 아닌, 앱으로 사용 되어야 할 것들이 있다. 리액트를 배우면 리액트 언어를 통해서 어플을 개발을 할 수도 있으므로 웹과 앱 두가지의 개발이 가능해진다
4. HTML 관리 용이성
리액트를 사용하면, HTML을 함수, 배열, 객체 등에 보관하고 재사용할 수가 있다.
그렇기 때문에 규모가 큰 프로젝트를 한다고 가정 했을때, 리액트를 사용하면 html 관리가 편해진다.
5. 넓은 생태계
사실 공부를 하면서 어려움을 느끼는 점은 나는 전공자도 아니고 국비지원이나, 부트캠프를 참여하는것도 아니라서 문제가 발생 했을때, 사소한 문제더라도 해결하는데에 시간이 많이 소요된다는 점이다.
주변에 개발 공부를 같이하는 커뮤니티가 형성이 되어있다면 문제가 생겨도 같이 고민해보면서 해결할 수가 있을텐데, 지금 나의 환경에서는 그럴 수가 없다. 그렇기 때문에 많은 자료들을 얻을 수 있는 리액트가 제일 최선이라고 생각했다.
