실무에서 리액트를 다룰 기회가 생겨 기초적인 것부터 시작해서 실무에서 부딪쳤던 경험들을 바탕으로 기록하려고 합니다.
물론, Vue.js 도 다룬 경험도 있지만 앞으로 리액트를 자주 사용하고 접하게 될 것 같아 따로 카테고리를 만들어 집중적으로 소개하려는 이유도 있습니다.
React란 무엇인가?
React(리액트)는 페이스북에서 개발/제공하는 자바스크립트 UI 라이브러리입니다.
리액트는 컴포넌트라는 개념에 집중이 되어있으며, HTTP 클라이언트, 라우터, 상태 관리 등의 기능들은 내장되어있지 않습니다. 따로 공식 라이브러리가 있는 것도 아니어서, 개발자가 원하는 스택을 맘대로 골라서 사용할 수 있습니다.
여기서 "컴포넌트"는 모듈 개념이라 생각하시면 되며, 쉽게 말해 HTML 덩어리들을 따로 만들어 그걸 모아서 하나의 페이지가 완성됩니다.
페이스북은 왜 리액트를 만들게 됐을까?
페이스북은 이렇게 말합니다.
We built React to solve one problem: building large applications with data that changes over time.
번역: 우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React를 만들었습니다
페이스북이 리액트를 만들기 전에도, 이미 Angular, Backbone, Knockout.js, Ember 등의 수많은 프레임워크들이 존재했었습니다.
이런 프레임워크들은 특정 이벤트가 발생했을 때, 모델에 변화를 일으키고, 변화를 일으킴에 따라 어떤 DOM을 가져와서 어떠한 방식으로
뷰를 업데이트해줄지 로직을 정해줘야 했습니다.
그래서 사용하는 게 바로, Virtual DOM(가상 돔)입니다.
일반적인 랜더링 방식은 실제 브라우저 변화(DOM)가 생기면, 렌더 트리를 재생성하고 요소들의 스타일이 다시 계산하게 되며, 변화를 적용하기 위해 브라우저가 많이 연산을 해야 한단 소리고, 전체적인 프로세스를 비효율적으로 만듭니다.
하지만 가상 돔은 변화가 일어나면, 실제로 브라우저의 DOM에 새로운 걸 넣는 것이 아니라, 자바스크립트로 이뤄진 Virtual DOM에 한번 렌더링을 하고, 기존의 DOM과 비교를 한 다음에 정말 변화가 필요한 곳에만 업데이트를 해주는 겁니다.
쉽게 말해 바뀐 데이터로 전체 그림을 그려주고 비교를 한 다음, 바뀐 부분만 찾아서 바꿔주고, 이러한 작업을 통해 실제 브라우저에서 DOM의 조작을 최소화해줄 수 있습니다. 이는 곧 성능 문제로 직결되는 것이라 아주 중요한 부분이라 생각됩니다.
React 시작
리액트는 create-react-app 명령어로 통해 프로젝트를 생성하실 수 있습니다.
$ npx create-react-app test-app
명령어를 자세히 보시면 npm이 아닌 npx라는 구문으로 실행하며, 이는 오타는 아니며, npm 5.2+ 버전의 패키지 실행 도구입니다.
cd test-app
npm start
언제 React를 써야 하는가?
더욱 복잡하고, 동적으로 나타내기 위해서 많은 상태 관리가 부담이 생길 경우.
1. 큰 규모의 웹/앱
Vue는 Template에 기반한 것으로서 가독성이 더 좋고 배우기도 편하지만, 앱의 규모가 점점 더 커질 때 수준에 따라 운영 과정에서 유지보수에 더 큰 노력이 듭니다.
또한 React에서 data의 불변 속성이 처음에는 복잡해 보일 수 있지만, 복잡한 규모의 앱에서는 테스트와 투명도 측면에서 빛을 발할 수 있습니다.
2. 다른 라이브러리에 비해 안정성과 개발자 커뮤니티
3. Component 단위 작성
4. 가상 돔을 통한 빠른 랜더링
댓글