React는 사용자 인터페이스를 만들기 위한 라이브러리 라고 정의할 수 있다.
프레임워크가 아니고 심지어 웹에서만 사용할 수 있는 것도 아니다.
React 다른 라이브러리들과 함께 특정한 환경을 렌더링하는 데 사용된다.
React Native는 모바일 애플리케이션을 만드는 데 사용될 수 있고, React 360은 가상현실 애플리케이션을 만드는데 사용할 수 있는 등, 많은 가능성이 존재한다.
웹을 만들기 위해서 사용하는 React는 ReactDOM과 함께 사용해야한다.
React는 JSX(JavaScript와 XML)라는 HTML-in-JavaScript 문법을 사용한다.
React는 특히 단일페이지 애플리케이션 개발에 적합하고, Facebook에서 개발되었으며 현재는 오픈소스 프로젝트로 유지되고 있다.
React의 동작과정은 다음과 같다.
- 컴포넌트 구조 : React애플리케이션은 컴포넌트라는 작은 조각으로 구성된다. 컴포넌트는 재사용 가능하며, 각각의 컴포넌트는 특정한 UI요소를 나타낸다.
- 가상 DOM(Virtual DOM): React는 가상 DOM을 사용하여 효율적인 UI업데이트를 관리한다. 가상 DOM은 실제 DOM의 가벼운 복사본으로, React 컴포넌트의 상태 변경 시에만 실제 DOM과 동기화된다.
- 컴포넌트 렌더링 : React는 컴포넌트를 기반으로 UI를 렌더링한다. 컴포넌트는 JSX라는 JavaScript와 HTML을 혼합한 문법을 사용하여 작성되며, 이를 React가 이해하고 가상 DOM을 업데이트 한다.
- 상태 관리 : React 컴포넌트는 상태(State)를 가질 수 있다. 상태는 컴포넌트의 데이터를 나타내며, 변경 시에 컴포넌트가 다시 렌더링된다. 상태는 컴포넌트 내에서 관리되며, 필요에 따라 상위 컴포넌트로부터 전달되는 속성(Props)으로도 사용된다.
React의 목표는
UI를 선언적으로 작성할 수 있도록 도와주고, 개발자는 컴포넌트의 상태를 정의하고, React는 이를 기반으로 UI를 자동으로 업데이트한다.
컴포넌트를 재사용가능하게 함으로써 필요한 곳에서 반복해서 사용할 수 있도록 한다.
React는 가상 DOM을 사용하여 효율적인 UI업데이트를 가능하게 한다. React는 실제 DOM과 비교하여 변경된 부분만 업데이트 하므로 성능을 향상시킬 수 있다.
React의 장점은 이와 같이 재사용가능한 컴포넌트로 코드의 재사용성과 유지보수성을 향상시킨다. 그리고 빠른 UI를 업데이트할 수 있다는 점이다.
React는 널리 사용되고 있는 라이브러리로, 다양한 지원과 커뮤니티 생태계를 가지고 있다.
하지만 React는 처음에 익숙하지 않은 개념과 문법을 갖고 있어서 초기 학습곡선이 있을 수 있고,
대규모 애플리케이션에서 상태관리가 복잡해질 수 있다. 이를 해결하기 위해 Redux, MobX등의 상태 관리 라이브러리를 사용할 수 있다.
SEO(검색 엔진 최적화_); React는 클라이언트 측에서 렌더링되기 때문에 초기 로드 시 SEO에 일부 문제가 있을 수 있다. 이를 해결하기 위해 서버 사이드 렌더링을 사용할 수 있다.
React를 기반으로 한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크인 React Native는 ios 및 android 애플리케이션 개발을 가능하게 한다.
React를 사용하여 가상현실(VR) 및 증강현실(AR) 애플리케이션을 개발할 수 있는 React VR도 가능하다.
React는 지속적으로 성장하고있고, 새로운 도구와 라이브러리, 컴포넌트 등이 계속해서 등장하고 발전하고 있다.
