📸 서론
드디어 js의 품에서 벗어나 React를 공부하기 시작했다 😀
현재 진행중인 부트캠프의 커리큘럼상 React를 배울 차례인 것과 그냥 프론트엔드 개발자가 되기 위해 공부하는 라이브러리 혹은 프레임워크중 보통 가장 많이 선택하는 친구이기 때문이라는게 React를 시작하게된 이유이긴 하지만.. 그래도 이런 하찮은 이유보단 프론트엔드 개발자가 되기 위해 내가 선택한 이 라이브러리가 무엇이 좋은지, 이걸 왜 많이 쓰는지, 단점은 무엇인지 등을 알고 시작해야겠다 싶어서 'React란 무엇인가!' 를 대략적으로라도 공부하고 정리해보고자 포스팅을 시작한다.
막 바닐라 js를 떼고 리액트를 공부한지 얼마 되지 않은 뉴비가 조사한 내용들을 이해한대로 정리해본 글이니 틀린 부분이 꽤 많을 것 같기도 합니다. 잘못된 부분이 있거나 장단점 등에 대한 의견이 있으시다면 피드백 주시면 감사히 받아먹겠습니다
👀 React란?
리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
출처 : 위키백과
React는 facebook에서 만든 프론트엔드 라이브러리로, 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다.
UI를 만드는거야 순수 HTML/CSS를 사용하여 당연히 해왔던 것인데 React의 UI 제작은 뭐가 다른걸까? React는 UI를 컴포넌트 단위로 만들기 위한 컴포넌트 라이브러리이다. 다른 특별한 템플릿 언어가 아닌 JavaScript를 이용해서 만든다.
React에서 말하는 컴포넌트(Component)란 특정 기능을 담당하는 독립적인 기능 블록인데, 웹페이지의 헤더나 푸터, 네비게이션 바 등과 같이 HTML/CSS로 디자인하고 JavaScript로 기능을 넣은 특정한 UI 부분을 따로 떼어낸 것. 즉 어떠한 UI 부분을 따로 모듈화 시킨 개념이라고 보면 된다.
이러한 독립적인 UI 모듈 하나를 컴포넌트라 하고, 화면 구성에 필요한 컴포넌트들을 본인이 생성한 후 그들을 조합하여 전체적인 UI를 구성하는 방식이 React의 핵심 철학이라고 한다. 마치 레고 조립과 같은 느낌이다.
즉 React란, HTML 요소를 컴포넌트화 하고 이 컴포넌트들의 조합으로 UI를 구성하여 웹/앱을 구현하기위해 사용하는 JavaScript 라이브러리이다.
그런데 이런 컴포넌트 방식으로 웹을 구현하는 React를 왜 사용하는 것일까? React의 몇가지 장점과 함께 React를 사용하는 대략적인 이유를 알아보자.
👻 React의 장점
생산성/재사용성
앞서 말했듯 React는 독립적인 단위의 컴포넌트라는 요소로 UI를 개발한다. 컴포넌트 기반 아키텍처는 일반적으로 일체형 UI에 비해 재사용과 유지보수, 확장이 용이하다.
간단한 예로 만약 여러 페이지에서 중복되는 부분(헤더나 푸터, 네비게이션 바 등)을 컴포넌트로 따로 만들어두면, 각 페이지에서는 그 컴포넌트들을 가져다 쓰기만 하면 되니까 코드도 적어지고 중복되는 로직 부분도 없어진다.
그리고 컴포넌트화 시키지 않고 순수 HTML 로만 페이지들이 구성되어 있었다면 이런 중복된 부분의 어딘가를 고쳐야 하는 경우, 이 부분을 사용하는 모든 페이지들에서 고쳐야할 지점을 하나하나 다 수정해야 한다.
하지만 컴포넌트화 시킨 상태라면, 해당 컴포넌트만 수정하면 이 컴포넌트를 사용하는 모든 페이지들에도 수정 사항이 변경되니 유지보수에도 굉장히 용이하다.
그리고 버튼과 같이 거의 모든 페이지에서 사용하는 범용적인 UI 요소의 경우, 기본적인 뼈대만 구성하여 컴포넌트화 시켜두면 버튼이 필요한 페이지에서 해당 버튼을 커스터마이징 하여 상황에 따라 유연하게 확장하여 사용할 수도 있다.
즉 React는 컴포넌트를 활용하여 개발자의 생산성(확장성)과 코드의 재사용성, 유지보수성을 높여준다.
빠른 UI 업데이트
만약 JS 만으로 페이지를 구성하였다면 화면에 한번의 변화가 일어날 때, 변경될 HTML 요소가 여러개라면 그 각각의 요소 변경에 따른 파싱과 렌더링 과정이 하나하나 다 실행된다. 만약 버튼 하나를 눌렀는데 5개의 요소가 추가되었다면, 5개의 요소가 한번에 DOM 트리에 추가되고 그것을 렌더링하는게 아니라 1개의 요소가 DOM에 추가되고 그에 따른 파싱-렌더링 과정이 진행되고, 또 1개의 요소가 추가되면 그에 따른 과정이 진행되고.. 이런 식으로 요소의 변화가 각각 반영된다.
그래서 UI 요소의 많은 변화가 자주 일어난다면 브라우저의 연산이 아주 많아지게 되고 그로 인한 부담으로 성능이 저하될 수 밖에 없다.
하지만 React는 가상 DOM이라는 기술로 효율적이고 빠른 UI의 변경을 지원한다.
가상 DOM은 가상의 Document Object Model을 말한다. React는 가상 DOM을 사용하여 브라우저에 이미 반영된 뷰(기존의 가상 DOM)와 새로운 뷰(변경이 적용된 가상 DOM)의 차이점을 찾아낸다.
어떠한 훌륭한 알고리즘(?)을 이용해 DOM의 변경 사항을 비교하고 이에 따라 View가 자동으로 갱신된다고 한다
화면의 요소가 변경되어야 하면 React는 일단 가상 DOM에만 그 변화를 적용하고 현재 브라우저상의 실제 DOM과 비교한다. 그리고 이 둘의 차이를 계산하여 그 차이 부분만큼을 한번에 변경하여 리렌더링(re-rendering)한다. 결과적으로 React는 딱 상태가 변경된 부분만을 갱신하여 내부 상태(가상 DOM)와 View(실제 DOM)를 같게 만든다.
즉 화면이 변경되었을 때, 원래는 5번 업데이트 해야될걸 한번에 업데이트 한다고 보면 된다. 이렇게 가상 DOM을 활용하여 브라우저의 과다 연산을 줄여주기 때문에 UI 업데이트 성능이 좋아진다.
물론 가상 DOM을 리액트를 사용하지 않고도 활용할 수 있는 방법이 있지만 고수준의 JavaScript나 CS 지식을 요하기 때문에 넘나 어렵다고 한다.
하지만 React는 알아서 가상 DOM으로 UI 업데이트의 성능을 높여주니 굉장히 편리하다..!
풍부한 자료/라이브러리
React는 페이스북과 인스타그램의 막대한 지지를 받고 있다고 한다. 이런 거대 기업들이 많이 사용한다는 것은 수백만 사용자의 브라우저에서 장점이 이미 검증되었다는 것이다.
전 세계적으로 가장 활발하게 커뮤니티 활동이 이어지고 있어 많은 자료와 오픈소스 라이브러리 등이 공유되고 있다.
이러한 거대 React 커뮤니티와 개발 생태계를 통해 수많은 라이브러리, 컴포넌트를 접할 수 있기 때문에 이는 개발자에게 편의성과 코드를 짧고 효율적으로 작성할 수도 있는 간결성이라는 이점을 부여한다.
더 많은 장점들이 있겠지만 React에 대해 나름 찾아보면서 내가 이해한건 대략 이정도로 정리해볼 수 있겠는데 이렇게만 봐도 프론트엔드 개발에 있어서 React를 많이 사용하는 것이 이해가 된다.
하지만 어떤 기술이든 단점이 있기 마련. React의 단점은 무엇일까?
👽 React의 단점
지속적인 업데이트
이건 장점이자 단점이라고 할 수 있을 것 같다. 여타 다른 라이브러리나 프레임워크들이 다 그렇겠지만 React는 특히 페이스북을 비롯해 여러 기업들에 의해 지속적으로 개발되는듯 하다.
페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.
출처 : 위키백과
React는 다른 프레임워크만큼 성숙하지 않다. React의 핵심 API는 여전히 조금씩 바뀌고 있다.
(물론 이게 언제쯤 얘기인지는 모른다. 지금은 좀 성숙할지도)
기술이 지속적으로 업데이트가 되는 것은 좋은 일이지만, 그것을 사용하는 개발자 입장에서는 그만큼 지속적인 학습을 요하는 것이기 때문에 피로를 유발하기도 한다.
새로운 버전에 대한 잦은 학습으로 인한 방대한 학습량이 단점이라면 단점일 수 있을 거 같다.
느린 첫 로딩속도/낮은 검색노출
React같은 SPA 라이브러리들은 client-side-rendering이기 때문에 기본적으로 처음 렌더링 되는 속도가 느리고, 구글같은 애들의 검색 엔진에 노출되기가 좀 어렵다. 근데 이 두가지 단점이 사이트의 수익성 등 핵심적인 부분에서 많이 치명적이라고 한다.
상태 관리 복잡도
React는 컴포넌트의 상태를 나타내는 State 라는 개념이 존재하는데, 가상 DOM에서 바뀐 부분을 찾아서 그 부분을 업데이트 한다는 것은 결국 State가 바뀐 부분을 찾는다는 것이다.
때문에 React에서 상태 관리는 굉장히 중요한 요소이기 때문에 이것을 잘하는 것이 매우 중요한데 이게 생각보다 어렵다고 한다.
(아직 막 공부하는 단계라 와닿지는 않음 ㅎ)
웹사이트의 규모가 커지고 컴포넌트가 많아지면 이 상태 관리의 난이도 또한 높아지기 때문에 보통 대규모의 프로젝트인 경우 상태 관리를 위해서 Redux, Recoil 과 같은 상태 관리 라이브러리를 사용한다고 하니 이런 라이브러리들에 대한 학습도 필요한 듯 하다.. 😭
😵💫 마치며
React에 대해 나름 탐구해봤는데 그래도 이렇게 정리해보니 React가 무엇인지, 왜 쓰는지, React를 배우는 이유를 알 것 같다.
근데 또 React를 잘 아는것도 아닌 상태이기 때문에 이런 내용들을 찾아봐도 크게 와닿지는 않고, 이해가 안되는 부분들도 꽤 많았고, 이렇게 최대한 이해하여 정리하는 것만도 시간이 생각보다 엄청 많이 걸려서 이게 맞나 싶기도 하다. React를 그래도 조금 공부한 상태니 그나마 이정도지 완전 처음이었으면 하나도 못알아먹었을듯
하지만 앞으로 React를 공부하면서 React에 대한 이해가 깊어지고 다시 이 글을 본다면 그땐, 이게 이런 뜻이었구나, 그래서 이런거였구나 하며 새로이 와닿는 부분이나 내 이해가 잘못되어 잘못 명시한 부분 등 지금은 보이지 않는 것들이 보일테니 그 언젠가를 생각한다면 나름 의미있는 짓이었을 거라고 생각한다.
생각보다 힘든 리액트 첫 포스팅을 마치고.. 이제 리액트 고수가 되는 그날까지 본격적으로 학습 시작 👊🔥
참고자료
https://data-study-clip.tistory.com/202
이정환 - 한입 크기로 잘라먹는 리액트 중 샘플강의 : Why React?
