[ React ] React란?

React란 : 사용자 인터페이스(UI) 개발에 초점을 맞춘 프론트엔드 라이브러리

• 복잡하고 동적인 웹 페이지 개발 시 사용이 용이
• 페이스북에서 만든 Javascript_UI 라이브러리
• 컴포넌트 기반 아키텍처를 기반으로 해 재사용성과 유지보수성을 높일 수 있도록 도와줌

 

React 개발 배경 : 웹 개발이 복잡해짐에 따라 html, css, js만으로는 한계가 생김 -> 초기에는 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게해주는 jQuery 라이브러리가 주로 사용됨 (DOM은 문서 객체 모델(Document Object Model)의 약어로, 웹 페이지 문서를 트리 구조의 노드로 표현. Javascript를 사용해 이러한 노드를 조작할 수 있음. DOM은 웹 페이지의 요소에 동적으로 접근하고 수정하는 데 사용되며, 웹 애플리케이션의 동적인 기능을 구현하는 데 중요한 역할을 함) -> DOM을 직접 조작하는 방식에 한계를 느껴 대규모 프로젝트에 효율적으로 코드를 관리하고, 컴포넌트 기반 UI 개발을 지원하는 프론트엔드 프레임워크가 등장함. 그중  Angular, React, Vue를 프론트엔드 개발을 대표하는 도구 3가지라 부름

웹 FE 프레임워크/라이브러리 개발 과정

 

 

React 사용 이유 : 리액트와 같은 프론트엔드 라이브러리나 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해주기 때문에 UI를 빠르게 업데이트할 수 있다는 점임. 리액트는 가상 돔(Virtual Dom)을 통해 재사용이 필요한 기능을 언제든지 필요한 곳에서 호출하여, 반복적인 코드 작성 없이 사용할 수 있도록 해줌 / 리액트의 UI를 만드는 기능을 확장하여 웹이 아닌 플랫폼에서 활용할 수 있도록 기술을 확장함. React Native는 안드로이드(Android)와 아이폰(iOS)의 모바일 앱을 만드는 대표적인 기술로 널리 사용되고 있음.

 

 

프레임워크와 라이브러리의 차이 : 앵귤러와 뷰는 프레임워크 / 리액트는 라이브러리라고 일컬어짐. 

•  프레임워크
  • 개발을 위한 기본 구조와 규칙을 제공하는 도구 - 개발자는 프레임워크가 제공하는 규칙과 인터페이스에 따라 코드를 작성해야함
  • 애플리케이션의 흐름과 제어를 관리, 필요한 기능과 도구 제공
  • ex) BE-Spring, FE-Angular,Vue
• 라이브러리
  • 개발을 위해 재사용 가능한 코드의 집합. 특정 기능을 수행하는 함수, 클래스, 모듈 등으로 구성됨
  • 개발자가 필요한 기능을 호출하여 사용가능
  • 라이브러리는 프레임워크와 달리 개발자가 코드의 흐름과 제어를 직접 관리
  • ex) jQuert, React, Express, Axios

프레임워크와 라이브러리는 모두 개발을 도와주는 도구들. 둘다 개발자가 이미 작성된 코드를 활용하여 개발을 빠르고 효율적으로 진행할 수 있도록 도와줌. 둘의 주된 차이점은 제어의 주체가 누구인가 하는 점. 프레임워크는 개발자가 어떻게 개발을 해야 하는지에 대한 지침을 제공하므로, 개발자는 프레임워크의 규칙을 따라야 하고, 라이브러리는 개발자가 필요한 라이브러리를 활용하는 방식으로 개발자에게 제어권이 주어짐.

 

리액트 특성 : 단방향 데이터 흐름(바인딩)부터 컴포넌트 기반 아키텍처, 가상 DOM 등의 특징을 토대로 프레임워크 개발의 편의성을 높임

• 가상 DOM : 리액트는 브라우저가 관리하는 실제 DOM이 아니라 가상 DOM을 사용해 UI 업데이트를 처리함. 이를 통해 최소한의 DOM 조작이 가능하여 신속한 UI 업데이트를 가능하게 하고 성능을 최적화 시킴
• 단방향 데이터 흐름(데이터바인딩) :  단방향 바인딩은 데이터의 변경이 UI로 전달되어 화면을 업데이트함. 뷰와 앵귤러는 양방향 데이터 바인딩 방식임. 양방향 바인딩은 데이터의 변경과 UI 요소의 상태 변경이 서로 영향을 주어 동시에 업데이트됨. 양방향 바인딩은 UI가 복잡해지면 성능이 저하되지만, 단방향 바인딩은 성능 저하 없이 DOM을 렌더링 시켜줌.
• 컴포넌트 기반 아키텍처 : 컴포넌트 기반 아키텍처란, 특정 기능을 수행하는 독립적인 단위인 컴포넌트를 이용해서 마치 작은 레고 블록으로 거대한 집을 만들 듯이 프론트엔드를 만들어 가는 구조를 의미함. 구성하는 UI 요소를 컴포넌트로 분리하여 개발하고, 이러한 컴포넌트들을 조합하여 복잡한 UI를 구성할 수 있음. 

 

리액트 문법 : 리액트는 자바스크립트와 XML을 조합한 JSX 문법을 사용함. JSX는 컴포넌트의 구조와 동작을 ‘선언적’으로 작성할 수 있게 해줍니다. ‘명령형(절차적)’프로그래밍 은 어떻게(HOW) 처리할지를 하나하나 코딩하는 방식이라면, ‘선언적’ 프로그래밍은 “어떻게” 보다 “무엇(WHAT)”을 해야 하는지를 지정하는 방식을 의미함. 이는 가독성을 높이고, 컴포넌트의 렌더링을 보다 직관적으로 이해할 수 있도록 도와줌.

 

다른 라이브러리와의 높은 호환성 : 리액트는 단독으로 사용할 수도 있지만, 주로 다른 라이브러리나 프레임워크와 함께 사용함. 예를 들어, 리액트 애플리케이션을 개발할 때는 리액트 라우터(React Router)를 사용하여 페이지 간의 전환을 관리하고, 상태 관리를 위해 리덕스(Redux) 또는 모빌(MobX)과 같은 라이브러리를 함께 사용할 수 있음.