React란?

React란?

React는 사용자 인터페이스(UI)를 구축하기 위해 개발된 JavaScript 라이브러리이다. 2013년 Facebook에서 처음 개발되어 공개되었으며, 현재는 Meta와 오픈 소스 커뮤니티에 의해 유지·관리되고 있다. 컴포넌트 기반으로 설계되어 재사용성, 유연성, 성능 최적화에 장점을 가지고 있다.

 

React의 탄생 배경

• Virtual DOM의 등장:  Virtual DOM은 DOM의 가상 버전을 메모리에 저장하여, 실제 DOM과의 차이를 비교하고 최소한의 변경 사항만 실제 DOM에 적용하여 성능을 최적화하는 기술이다. 이를 통해 React는 복잡한 UI에서도 빠르게 동작할 수 있게 되었다.
  • Virtual DOM : React에서 UI 성능을 최적화하기 위해 사용하는 가상화된 DOM 구조이다. Virtual DOM은 브라우저의 실제 DOM을 직접 조작하지 않고, 메모리 상에 DOM의 가상 버전을 만들어 상태 변화가 발생할 때마다 이 가상의 DOM과 실제 DOM 간의 차이를 계산하여, 변경된 부분만을 실제 DOM에 반영하는 방식으로 동작한다. 이러한 동작 방식을 통해 DOM의 전체 업데이트로 인한 성능 저하를 최소화하여 빠르고 효율적인 UI 렌더링을 가능하게 할 수 있다. 
• UI의 구성 요소화(컴포넌트화) : React는 UI를 여러 컴포넌트(component)로 나누어 각각의 컴포넌트가 독립적으로 상태(state)를 관리하고 화면을 업데이트할 수 있도록 설계되었다.

React의 주요 특징

• 컴포넌트 기반 아키텍처 : 컴포넌트(component)라는 작은 독립적이고 재사용 가능한 코드 블록을 사용하여 전체 UI를 구성할 수 있다. 각 컴포넌트는 독립적인 상태와 로직을 가지며, 이러한 컴포넌트들이 모아 전체 애플리케이션을 구성할 수 있다.
• 단방향 데이터 흐름(One-way Data Flow) : 부모 컴포넌트에서 자식 컴포넌트로 단방향 데이터 흐름을 가진다. 즉 데이터를 props라는 특수한 객체로 전달하며, 자식 컴포넌트는 부모 컴포넌트의 props를 읽기 전용으로 가져와 사용할 수 있다. 
• JSX(JavaScript XML) : React는 HTML과 같은 문법을 JavaScript 안에서 사용할 수 있도록JSX라는 확장 문법을 제공한다.
• React Hooks : 함수형 컴포넌트에서도 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있도록 만들어진 특수한 함수들이다. Hook을 통해서 더 간결한 코드 작성, 로직의 재사용성 향상, 그리고 복잡성을 감소시킬 수 있다. hook에 대해선 다음 글에서 더 자세히 다룰 예정이다. 

React와 React Native의 차이점

이제 react에 대해 공부하다보면 React Native에 대해 들어볼 것이다. 이름도 비슷한 이 둘의 차이는 뭘까?

React Native란?

React Native는 모바일 애플리케이션(Android, iOS)을 구축하기 위한 React 기반 라이브러리로, HTML과 CSS 대신 네이티브 모바일 UI 컴포넌트를 사용하여 화면을 구성한다. JavaScript 코드를 네이티브 코드로 변환하여 실행되기 때문에, 실제 네이티브 애플리케이션과 같은 퍼포먼스와 UI를 제공할 수 있다.

React와 React Native의 차이점

• React: HTML 태그(div, span, h1, p 등)를 사용하여 UI를 구성하며,  웹 페이지에서 사용되는 HTML DOM을 렌더링하며, CSS를 사용하여 스타일을 적용한다.
• React Native: 네이티브 컴포넌트(Text, ScrollView 등)를 사용하여 UI를 구성하며, 이 네이티브 컴포넌트들은 각각 iOS와 Android의 네이티브 UI 요소로 변환된다.
  • 예를 들어, Text 컴포넌트는 iOS에서는 UILabel, Android에서는 TextView로 변환된다.
• DOM vs. 네이티브 UI 컴포넌트 : React의 경우 브라우저의 DOM API를 통해 UI를 조작하는 반면, React Native는 DOM이 존재하지 않으며, 각 플랫폼의 네이티브 UI 컴포넌트로 변환된다. 이때 React Native가 브리지(Bridge)를 사용하여 JavaScript 코드와 네이티브 코드 간의 통신을 수행한다.