3월 기술면접대비 - JS와 비교 시 리액트를 사용하려는 이유

 

 

VanillaJS와 비교하여 React를 사용하는 이유는 무엇일까?

 

 

React의 컴포넌트를 손쉽게 재사용할 수 있습니다

React는 별도의 컴포넌트를 만드는 용도로 쓰입니다. 이렇게 생성된 컴포넌트는 쉽게 재사용할 수 있습니다.

(상위 컴포넌트로 래핑되는) 이러한 컴포넌트로 더 큰 일반적인 계층 구조가 구축되지만, 각 컴포넌트에는 각각 별도의 전용 내부 로직과 렌더링 원칙이 있습니다. 이를 바탕으로 확장성이 뛰어나고, 훨씬 더 나은 React 웹 앱 일관성을 달성할 수 있으며, 추가 개발 지원 및 최적화가 매우 쉬워집니다.

 

 

React는 Virtual DOM으로 훨씬 더 강화된 성능을 냅니다

React는 실제 DOM을 가상화하여 메모리에 보관함으로써 React는 모든 뷰 변경 사항을 가상 DOM에 반영하여 빠른 속도의 렌더링을 제공합니다. 특화된 diff 알고리즘은 이전과 기존 가상 DOM 상태를 병렬적으로 비교하여 많은 업데이트 없이 새로운 변경 사항을 적용하는 가장 효율적인 방법을 계산합니다. 그런 다음 최소한의 업데이트를 도입하여 가장 빠른 읽기/쓰기 시간을 달성하고 전반적인 성능을 향상시킵니다.

DOM 변경은 시스템을 느리게 만드는데, DOM을 가상화하면 이러한 변경을 최소화할 수 있습니다. 모든 가상 DOM 조작은 ‘백그라운드‘에서, 내부에서 자동으로 이루어지기 때문에 하드웨어 리소스 소모율(예를 들어 모바일 기기의 CPU 전력 및 배터리)을 크게 절약할 수 있습니다.

 

 

React는 HTML확장을 위한 JSX구문을 사용할 수 있습니다

React.js를 사용하면 자바스크립트 코드에서 명시적 HTML 구문을 직접 활용할 수 있습니다. 브라우저는 사용자 인터페이스를 표시하기 위해 HTML 텍스트를 디코딩합니다. 브라우저는 이를 위해 DOM 트리를 구축한 다음 자바스크립트로 조작하여 대화형 UI를 만듭니다.

매니폴드에 의한 DOM 조작은 JSX를 사용하면 더욱 효율적입니다. 개발자는 브라우저의 트리 구조에 HTML과 React.js 컴포넌트를 전달하여 유지보수가 쉬운 깔끔한 코드를 구축할 수 있습니다. JSX와 Virtual DOM 덕분에 React.js 앱은 더 빠르고 효율적입니다. 다른 프레임워크와 라이브러리도 JSX와 함께 활용할 수 있습니다.

 

 

React는 hook을 사용하여 더욱 손쉬운 state관리가 가능합니다

이전처럼 복잡한 class의 라이프사이클을 작성하지 않아도 hook을 사용하여 컴포넌트 간의 state로직을 간단하게 관리할 수 있습니다. 비슷한 로직들을 하나의 컴포넌트로 그룹화할 수 있으며, props나 class가 없는 컴포넌트 간에 데이터를 전송할 수 있습니다.

 

 

 

 

 

 

 

 

 

reference.
리액트(React)를 왜 사용해야 할까? – 리액트가 강력한 이유.김성혁(23.10).https://modulabs.co.kr/blog/react-library/

10 Key Reasons Why You Should Use React for Web Development.(23.03).https://www.techmagic.co/blog/why-we-use-react-js-in-the-development/