오늘부터 리액트를 학습한 내용들을 바탕으로 리액트에 대해 정리해보도록 하겠슴다.
1. 완성도 높고 이해하기 쉬운 개발 워크플로우
웹 개발에 React.js를 사용하는 주요 이유 중 하나는 라이브러리에 최적화된 개발 인터페이스와 코딩 언어 때문입니다. 빠른 성능으로 강화된 가벼운 React API는 신속한 개발 워크플로우를 구현합니다. React 구성 요소와 개념은 이해하기 쉬우므로 이 부분에 대한 *러닝 커브가 높지 않습니다.
* 러닝 커브 = 신기술을 학습하는 데에 소요되는 시간을 나타내는 곡선
즉 보다 직관적이고 편리한 사용성을 이점으로 가져갑니다
2. 뛰어난 유연성과 호환성
웹 개발에 React.js를 사용하면 매우 편리한데, 그 이유는 한번 익힌 기술을 다양한 플랫폼에서 쉽게 재사용할 수 있기 때문입니다. Button과 Label부터 Grid, interactive 기능에 이르기까지 다양한 웹 디자인 요소와 컴포넌트를 생성하는 것을 주 목적으로 하는 자연스러운 라이브러리이기 때문이기도 합니다.
또한, React가 사용되는 이유에는 오랜 역사를 자랑하는 거대한 커뮤니티의 공헌이 큽니다. 현재 React의 생태계는 매우 방대하기 때문에 비슷하고 단순한 React 웹 개발 가이드라인과 철학에 따라 데스크톱 솔루션과 모바일 애플리케이션을 만들고, 정적 웹사이트를 생성하고, 서버 렌더링을 처리하고, VR 및 360도 뷰와 같은 고급 기술 개념을 웹 솔루션에 적용할 수 있습니다.
3. 손쉬운 컴포넌트 재사용성
위에서 궁극적으로 물었던 질문, 웹 개발에서 React.js가 가장 많이 사용되는 용도는 무엇일까요? 바로 별도의 컴포넌트를 만드는 용도입니다. 바로 이런 이유 때문에 생성된 컴포넌트를 쉽게 재사용할 수 있습니다. React.js 웹 애플리케이션 요소를 생성하면 React 기반의 코드와 호환 가능한 다른 프로젝트에 고유한 오브젝트를 추가할 수 있습니다.
(상위 컴포넌트로 래핑되는) 이러한 컴포넌트로 더 큰 일반적인 계층 구조가 구축되지만, 각 컴포넌트에는 각각 별도의 전용 내부 로직과 렌더링 원칙이 있습니다. 이를 바탕으로 확장성이 뛰어나고, 훨씬 더 나은 React 웹 앱 일관성을 달성할 수 있으며, 추가 개발 지원 및 최적화가 매우 쉬워집니다.
- 컴포넌트의 재사용성으로 실제 코딩 과정에서 반복되는 코드들, 각각의 컴포넌트에 대한 CSS 스타일링을 보다 부드럽게 적용해볼 수 있어서 좋았다.
4. Virtual DOM으로 한층 강화된 고성능
DOM을 가상화하여 메모리에 보관함으로써 React는 모든 뷰 변경 사항을 가상 DOM에 즉시 반영하여 놀라운 속도의 렌더링을 제공합니다. 특화된 diff 알고리즘은 이전과 기존 가상 DOM 상태를 병렬적으로 비교하여 많은 업데이트 없이 새로운 변경 사항을 적용하는 가장 효율적인 방법을 계산합니다. 그런 다음 최소한의 업데이트를 도입하여 가장 빠른 읽기/쓰기 시간을 달성하고 전반적인 성능을 향상시킵니다.
DOM 변경은 시스템을 느리게 만드는데, DOM을 가상화하면 이러한 변경을 최소화하고 스마트하게 최적화할 수 있습니다. 모든 가상 DOM 조작은 ‘백그라운드‘에서, 내부에서 자동으로 이루어지기 때문에 하드웨어 리소스 소모율(예를 들어 모바일 기기의 CPU 전력 및 배터리)을 크게 절약할 수 있습니다.
5. Flux와 Redux의 힘
웹 개발자에서 React에 대한 특별한 수요는 즉시 사용할 수 있는 Flux와 Redux 기능에 의해 결정되었습니다. Facebook의 개발자들은 단방향 데이터를 처리할 수 있는 Flux 기반 소프트웨어 아키텍처를 처음 도입했습니다.
Central dispatcher는 생성된 action을 관리하고 store를 변경하는 데 사용됩니다. 이후 store 변경에 따라 view를 업데이트합니다. 이때 모든 데이터는 중복되지 않은 형태로 store에 유지되며, 모델과 멀지않은 상태로 동기화 유지됩니다.
Flux는 편리한 UI 디자인 워크플로우를 위해 프론트엔드에서 사용되는 아키텍처 패턴일 뿐, 완전한 라이브러리로 사용할 수는 없습니다. Redux는 편리한 Flux 구현을 위해 등장하였습니다. Redux는 모든 앱 데이터를 처리할 수 있는 단일 store 객체를 제공하여 기본 데이터 관리 조작을 간편하고 편리하게 만들어 줍니다. View가 연관 데이터와 지속적으로 동기화되는 동안, Redux는 store 변경 을 감지하여 랜더링을 실행하게 합니다.
6. 다양한 툴 제공
웹 개발에 React JS를 사용하는 이유에 대해 전문가들은 다양한 툴과 기술 스택을 강조합니다. Redux 개발자 도구와 함께 React 개발자 도구는 매우 편리한 기능이 제공되며, 크롬 확장 프로그램처럼 쉽게 설치하여 사용할 수 있습니다. 개발자 도구의 도움으로 React 기반 구성 요소(props 및 state 포함)와 Dispatch Action을 효율적으로 확인하고 확인할수 있고, 확장 프로그램을 통한다면 state 변경 사항까지 확인할 수 있습니다.
7. React Native의 강력한 기능
웹개발자들이 Native 또는 Hybrid 앱 개발 프로젝트를 시작하려는 경우 React를 사용하는것이 과연 맞을까?라는 의문들이 가졌고, 이 시기 iOS와 안드로이드용 native 및 hybrid 모바일 앱 개발의 판도를 바꿀 수 있는 React Native가 등장합니다. 물론 특정 코드를 재사용할 수 있는 기회를 잃게 되지만, 적절한 네이티브 성능과 시스템 관리를 수행하여 줍니다.
단일 코드 베이스로 하나의 앱을 빌드하여 비용을 절감할 수 있으며, 다양한 운영 환경, 다양한 솔루션에 맞춤형 결과를 하이브리드 형태로 제공할 수 있습니다.
8. 시장에 영향을 미치는 거대한 커뮤니티와 리소스
GitHub에서 상위 5개 리포지토리 중 하나이며, 대규모 커뮤니티의 지원을 받고 있습니다. 또한 Fortune 500대 기업( Netflix, Uber, Amazon, Airbnb 등)에서도 선호하는 기술입니다.
Facebook에서 직접 일하는 전문가들의 활발한 지원을 받을 수 있으며, 세계에서 가장 유명한 소프트웨어 솔루션의 핵심 기술인것만으로서 웹 개발에 React.js를 사용해야 하는 충분한 이유가 될 수 있습니다. Facebook 개발자의 인사이트와 업데이트가 공유되는 블로그도 존재합니다.
9. HTML 확장을 위한 JSX 구문
웹 개발에 React를 사용하는 이유는 무엇인가요? React.js를 사용하면 자바스크립트 코드에서 명시적 HTML 구문을 직접 활용할 수 있습니다. 브라우저는 사용자 인터페이스를 표시하기 위해 HTML 텍스트를 디코딩합니다. 브라우저는 이를 위해 DOM 트리를 구축한 다음 자바스크립트로 조작하여 대화형 UI를 만듭니다.
매니폴드에 의한 DOM 조작은 JSX를 사용하면 더욱 효율적입니다. 개발자는 브라우저의 트리 구조에 HTML과 React.js 컴포넌트를 전달하여 유지보수가 쉬운 깔끔한 코드를 구축할 수 있습니다. JSX와 Virtual DOM 덕분에 React.js 앱은 더 빠르고 효율적입니다. 다른 프레임워크와 라이브러리도 JSX와 함께 활용할 수 있습니다.
10. React Hook
React Hook이 처음 소개되었을 때 Redux를 대체할 것인지에 대해 많은 논의가 있었습니다. 그럴 거라고 생각하지 않습니다. 하지만 Hook은 자바스크립트 작성자가 함수 컴포넌트에 state와 다른 기능들을 추가할 수 있게 해주는 React.js 16.8의 새로운 기능인거는 확실합니다.
이제 더 이상 복잡한 class에 대처할 필요가 없습니다. Hook을 사용하여 컴포넌트 간의 state 로직을 간단하게 관리할 수 있고, 비슷한 로직들을 하나의 컴포넌트로 그룹화할 수 있으며, props나 class가 없는 컴포넌트 간에 데이터를 전송할 수 있습니다.
참고자료
https://www.techmagic.co/blog/why-we-use-react-js-in-the-development/
Why Use React for Web Development: 10 Reasons To Apply
We are glad that TechMagic is on the list of react.careers - the open-source directory of companies using React.js. We would like to introduce this outstanding JS library, what is React and explain why we are working with React.
www.techmagic.co
'국비교육 > React' 카테고리의 다른 글
| React - 감정일기장 만들기 #02 (0) | 2024.03.24 |
|---|---|
| React - 감정 일기장 만들기 #01 (1) | 2024.03.22 |
| React 예제풀이 #03 useRef (0) | 2024.03.14 |
| React 예제풀이 #02 useEffect를 사용한 특정 조건에 따른 결과값 출력하기 (2) | 2024.03.12 |
| React 예제풀이 # 01 - 카운터를 통하여 알아보는 자바스크립트와 리액트의 차이점,장단점 (0) | 2024.03.11 |
