React.js

사용자 인터페이스UI를 만들기 위한 JavaScript 라이브러리.

라이브러리? 프레임워크?

공식적으로 React.js는 자바스크립트 기반의 '라이브러리'입니다.

그런데 React.js는 초창기에는 단순한 UI 라이브러리로 시작했지만, 시간이 지나면서 많은 기능과 생태계가 발전하면서 프레임워크와 유사한 특징을 가지게 되었다고 볼 수도 있습니다. 따라서 React.js를 프레임워크라고 주장하는 의견도 존재한다고 합니다.

React.js를 사용해야하는 이유

본 내용은 TechMagic의 Team Lead & Senior Front-End Engineer인 Oleksandr Hutsulyak씨가 작성한 웹 개발자가 React.js를 사용해야 하는 10가지 이유의 내용을 기반으로 정리한 것입니다.

• 영문 -> 한국어 번역 이후 내용을 요약하면서 표현이나 구성이 원문과 달라진 부분이 있습니다! 따라서 아래 정리 내용은 가볍게 읽고, 필요한 경우에는 반드시 원문을 참조해주세요.

1. 성숙하고 이해하기 쉬운 개발 워크플로우

React.js는 최적화되어 효율적인 개발 환경을 제공하며, 학습 곡선이 낮아 빠른 개발을 가능하게 합니다. JSX를 사용하여 HTML을 더 깔끔하게 작성할 수 있어 코드의 가독성과 유지 보수성을 향상시킵니다.

2. 궁극적인 유연함과 호환성

React.js는 다양한 플랫폼를 지원하며 방대하고 심도있게 형성된 커뮤니티의 지원을 받을 수 있어, 다양한 웹 개발 상황에 대응할 수 있습니다.

3. 컴포넌트 재사용성

React.js에서 생성된 컴포넌트는 독자적인 로직과 렌더링 규칙을 지니게 됩니다. 이는 하나의 컴포넌트를 재사용하기 용이하며 확장하는 것도 쉽게 이루어질 수 있다는 뜻입니다.

4. Virtual DOM으로 한층 강화된 성능

• 이건 아래에서 더 자세하게 설명해보겠습니다.

5. Flux와 Redux의 힘

Flux는 React 애플리케이션의 데이터 흐름을 관리하기 위해 Facebook에 의해 개발된 아키텍처 패턴입니다. 이 패턴은 데이터의 단방향 흐름을 채택하여 애플리케이션의 상태 관리를 예측 가능하게 만듭니다. Redux는 이 Flux 아키텍처의 원칙을 더욱 효과적으로 구현하는 라이브러리로, 전역 상태를 단일 저장소에서 관리함으로써 애플리케이션의 상태를 일관되게 유지할 수 있게 돕고, 상태 변경 로직을 중앙에서 관리하여 디버깅과 테스팅을 용이하게 합니다.

6. 다양한 툴 제공

React Developer Tools 및 Redux Development Tools와 같은 도구는 React 기반의 구성 요소를 효과적으로 검사하고 상태를 확인하는 등의 기능을 제공합니다. 이러한 도구를 사용하여 웹 사이트를 개발하고 관리하는 데 편리한 환경을 제공합니다.

7. React Native의 강력한 기능

React.js는 데스크톱은 물론 모바일 환경에서도 개발을 지원하고 있습니다. React Native를 통해 단일 코드 베이스로 하나의 앱을 빌드하여 비용을 절감할 수 있으며, 다양한 운영 환경, 다양한 솔루션에 맞춤형 결과를 하이브리드 형태로 제공할 수 있습니다.

8. 거대한 커뮤니티와 지원 리소스

React.js는 세계에서 가장 유명한 IT 업체에 의해 개발되어 유지보수 되고있습니다. 안정적이며 피드백 수용이 빠르고, 다양한 전문가들의 지원을 받을 수 있습니다.

또한 React.js가 웹 시장에서 차지하는 점유율이 높고, 오래됨으로 관련 커뮤니티의 규모도 기하급수적으로 성장하여 신규 개발자가 받을 수 있는 지원의 규모도 거대해져 있습니다.

9. JSX 구문

JSX는 HTML과 유사한 구문을 사용하여 JavaScript 코드 내에서 UI 구조를 선언적으로 설계할 수 있게 해주는 React의 확장 문법입니다. 이 구문을 통해 개발자는 컴포넌트의 구조를 직관적으로 작성할 수 있으며, 이는 React가 내부적으로 JavaScript 객체로 변환하여 처리합니다. JSX의 사용은 코드의 가독성을 향상시키고, 오류 가능성을 줄여주며, 복잡한 UI 개발을 간소화합니다.

10. React Hook

React.js 16.8에서 도입된 React Hook은 React.js의 저변을 더욱 넓혀주었습니다. 더 이상 복잡한 class를 다룰 필요가 없고, 더 쉽고 간단하게 컴포넌트 간의 state 로직을 간단하게 관리할 수 있고, 비슷한 로직들을 하나의 컴포넌트로 그룹화할 수 있으며, props나 class가 없는 컴포넌트 간에 데이터를 전송할 수 있습니다.

Virtual DOM, 가상 DOM

• 실제 DOM:
  - DOM 요소를 변경하려면 브라우저가 해당 요소를 찾아야 하고, 변경이 발생하면 렌더링 엔진은 해당 변경 사항을 반영하기 위해 레이아웃을 다시 계산하고 UI를 다시 그리는 작업을 수행합니다.

이러한 과정은 변경 사항이 많거나 복잡한 UI를 다룰 때 성능 문제를 발생시킬 수 있습니다.

• Virtual DOM:
  - Virtual DOM은 실제 DOM의 추상화된 버전입니다. 즉, JavaScript 객체로 구성된 가벼운 트리 구조입니다.
  - React는 UI를 Virtual DOM에 렌더링하고, 상태 변경이 발생하면 Virtual DOM을 새로 만들어 이전 Virtual DOM과 비교합니다.
  - Virtual DOM에서 변경된 부분만을 실제 DOM에 반영하므로 렌더링 엔진이 실제 DOM을 다시 계산하고 UI를 다시 그리는 작업을 최소화할 수 있습니다.

이러한 방식으로 React는 성능을 향상시키고 사용자 경험을 향상시킵니다.

Virtual DOM의 동작 원리:

• 초기 렌더링: React 애플리케이션이 처음으로 렌더링될 때, React는 가상 DOM을 생성합니다. 이를 기반으로 실제 DOM이 렌더링됩니다.
• 상태 변경: 사용자 상호 작용 또는 데이터 변경과 같은 이벤트가 발생하면, React는 변경된 데이터를 이용하여 새로운 가상 DOM을 생성합니다.
• 가상 DOM 비교: 이전 가상 DOM과 새로운 가상 DOM을 비교하여 변경된 부분을 식별합니다. 이를 통해 실제 DOM에 적용해야 할 최소한의 변경 사항을 결정합니다.
• 실제 DOM 업데이트: 변경된 부분만을 실제 DOM에 적용하여 UI를 업데이트합니다. 이 과정에서 불필요한 렌더링이나 레이아웃 계산이 최소화되어 성능이 향상됩니다.

Flux 아키텍처

React.js에서는 데이터의 흐름이 단방향으로 제어됩니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하고, 자식 컴포넌트에서는 이 데이터를 변경할 수 없습니다. 이로 인해 데이터의 흐름이 예측 가능해지고, 애플리케이션의 상태 관리가 보다 간단해집니다.

재사용 가능한 컴포넌트

React.js는 컴포넌트 기반 아키텍처를 채택하여 UI를 작은 독립적인 조각으로 나누어 관리합니다. 이러한 컴포넌트는 재사용 가능하며, 다른 프로젝트나 다른 부분에서 쉽게 재활용할 수 있습니다. 또한, 컴포넌트를 조합하여 복잡한 UI를 구성할 수 있으며, 이는 개발의 생산성과 유지 보수성을 향상시킵니다.