📝리액트란
리액트는 Facebook에서 만든 Javascript 라이브러리로 핵심 요소는 가상 DOM으로 인한 빠른 렌더링 기술을 가진다
📝리액트 장점
- 가상 돔을 이용한 빠른 렌더링
- 가상돔을 이용해 필요한 부분만 렌더링해 속도의 최적화가 가능합니다
- 클라이언트 사이드 렌더링
- 클라이언트 측에서 렌더링하기 때문에 서버에 부담이 없어집니다
- 컴포넌트 재활용
- 클래스를 생성하고 객체를 만들어서 다양한 곳에 사용하는 것과 동일합니다
- 개인적인 의견 → 물론 사용해보니 여러명에서 개발할 때 공통 컴포넌트 자체를 만들기는 쉽지 않아보입니다 다양한 상황에는 다양한 조건들이 들어가는데 어떤 건 살짝만 다른데 코드가 더 들어가면서 코드가 덕지덕지 많아지며 점점 복잡해지니 많은 경험과 리팩토링도하면서 어떤 걸 공통으로 만들어야할지에 대한 개념을 익혀야합니다
- React Native (크로스 플랫폼 개발)
- React 문법을 익혀두면 React Native로 크로스 플랫폼 개발이 가능해 iOS, AOS 개발이 가능합니다
- 개인적인 의견 → 현재 React Native의 버전이 아직도 1버전이 안 된 거보면 매우 불안정한 상태이고 공식적인 라이브러리도 따로 제공하지 않는 걸로 압니다 이 부분은 남이 만든 걸 가져다 쓰는데 업데이트가 주기적으로 이루어지지 않으면 운영하다 버그가 날 가능성이 높아보입니다
현재 React도 비슷한 형태이지만 앱개발엔 많은 기술들이 들어가는데 React Native에서 기본적으로 제공하는 게 많이 없다면 npm에 의존할 수 밖에 없을 것 가텐요
📝리액트 단점
- 러닝커브가 크다
- 상태관리와 렌더링에 대한 개념이 어렵고 새롭기 때문에 기존 HTML과 Javascript로 개발하는 것과 다른 점이 있어서 난해할 수 있다
- SEO 적용이 힘들다
- 일반적으로 Server에서 그려져서 오면 검색엔진 봇이 내용을 읽어서 검색시 노출되게 할 수 있는데 React의 경우 Client Side Rendering이 주요 기술이라 Client가 제공해주는 js내용을 다운 받아서 그리기 때문에 검색엔진 봇이 들어왔을 때 아무 내용이 없어서 검색단어들을 가져갈 수 없는 것이죠 현재는 React에서도 Server Side를 지원하고 SEO 최적화를 위한 기술들을 제공하기 때문에 큰 문제가 되진 않아보입니다
- 초기 로드시간이 느리다
- CSR 방식을 이용하면 모든 스크립트와 리소스가 다운로드 될 때까지 기다려야 하기 때문에 첫 페이지 로드가 느릴 수 있습니다
📝리액트 동작과정 (Virtual Dom)
일반적으로 웹 브라우저의 동작은 웹 브라우저가 웹사이트의 텍스트 문서를 읽어서 DOM(Document Object Model)이라는 트리 구조로 바꾸어 사용자에게 보여주게 되는데, 웹 개발자들은 사용자의 반응에 따라 이 DOM 트리를 변경하여 웹사이트의 내용을 갱신합니다 (실제로 jQuery나 Vanila를 이용해 수정하게끔 이벤트를 만들어서 테스트하면 최상위 body의 값이 깜빡거리면서 전체를 렌더링하는 걸 확인할 수 있습니다) 하지만 매번 작은 변화가 있을 때마다 전체 화면을 새로 그리는 것은 성능에 좋지 않습니다
React는 이 문제를 해결하기 위해 Virtual DOM을 도입합니다
Virtual Dom은 위 그림처럼 어느 부분이 변경 되어있는지 정확히 파악이 가능하기 때문에 변화를 주고 싶은 부분만 Virtual DOM에서 수정하게 됩니다
또한 DOM을 직접 조작하는 건 low-level이라 까다롭고 안정성이 떨어집니다 특히 규모가 커지면 엄청 많은 코드를 적어야할지도 모릅니다 그래서 돔으로 직접 조작하는 jQuery와 같은 라이브러리는 legacy 취급을 받습니다
📝Angular(앵귤러) vs Vue.js vs React
Angular, React, Vue 전부 비슷한 계열의 CSR이며 필요한 부분만 렌더링하는 기술들이 들어가있습니다
- Angular
- 구글에서 만든 프레임워크로서 구글에서 만들었지만 2년째 업데이트가 안 되고 있네요 구글에서는 자주 가져다 버리는 프로젝트들이 많습니다 어떤 기술을 택할 때 중요한 부분이니 고려 바랍니다
- Vue
- 1인 개발자가 만든 프레임워크인데 현재 다운로드수도 Angular에 비해 많고 React에 비해서 쉽다고 합니다
개인적으로 가장 많이 쓰면서 안정화된 버전이 나오고 최근에 업데이트되고 있는 기술을 쓰는게 좋습니다 고로 React를 사용하는게 좋다고 생각해요 물론 우리나라 취업시장을 고려하긴 해야합니다
🔗 참고 및 출처
https://velog.io/@juno7803/React%EA%B0%80-%ED%83%9C%EC%96%B4%EB%82%9C-%EB%B0%B0%EA%B2%BD
[React] React란? 동작원리는 어떻게 될까? (tistory.com)
https://modulabs.co.kr/blog/react-library/
https://npmtrends.com/angular-vs-react-vs-vue