추가 : React와 React Native의 차이

특징	React	React Native
사용 목적	웹 애플리케이션 개발	모바일 애플리케이션 개발
렌더링 방식	가상 DOM 사용	네이티브 컴포넌트 사용
스타일링	CSS 또는 CSS-in-JS 사용	JS 스타일 객체 사용
플랫폼	웹 브라우저	iOS, Android

 

렌더링 방식

React의 가상 DOM VS React Native의 네이티브 컴포넌트

• React는 브라우저의 실제 DOM(Document Object Model)이 느려서 변경사항을 가상 DOM에서 먼저 계산한 뒤 실제 DOM에 필요한 최소한의 변경만 적용하는 방식으로 성능을 최적화함.

• React Native에서는 브라우저 DOM 대신 각 플랫폼의 네이티브 UI 컴포넌트(UIView, ViewGroup 등)를 직접 사용함.
• React Native는 브릿지를 통해 JS와 네이티브 UI 사이를 연결함.

* React와 React Native 모두 React의 조정(Reconciliation) 알고리즘을 사용함. 이 알고리즘은 변경된 부분을 효율적으로 감지하는 역할을 하며, React Native에서도 작동함. 하지만 이 과정은 가상 DOM을 사용하는 것이 아니라,변경된 내용을 네이티브 컴포넌트로 전달하는 데 집중됨.

 

스타일링

React의 CSS 또는 CSS-in-JS VS React Native의 JS 스타일 객체 사용

• React는 CSS를 직접 사용하거나, CSS-in-JS(styled-component 등) 라이브러리를 통해 스타일링함.

• React Native는 CSS가 아닌 JS 스타일 객체를 사용해 스타일링함.
• 모든 스타일은 플랫폼에 적합한 네이티브 스타일로 변환됨.

 

플랫폼 의존성

React의 웹 브라우저 VS React Native의 iOS/Android

• React는 웹 브라우저에서만 실행되며, 크로스 브라우저 호환성을 고려해야 함.

• React Native는 네이티브 플랫폼(iOS, Android)에 따라 다른 API와 컴포넌트를 사용할 수 있음.
• Platform 모듈을 통해 플랫폼별로 코드를 분리할 수 있음.

import { Platform } from 'react-native';

const styles = Platform.select({
  ios: { fontSize: 20 },
  android: { fontSize: 18 },
});