React란?

React

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.

• React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있다.
• 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다.

즉, 현재 많이 활용되고 있는, 웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있다.

---

React의 특징

크게 5가지 특징이 있다.
1 - Data Flow
2 - Component 기반 구조
3 - Virtual Dom
4 - Props and State
5 - JSX

1. Data Flow

React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.

Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다.

-> 양방향 바인딩은 UI가 복잡해지면 성능 저하. 단방향 바인딩은 성능 저하 없이 DOM을 렌더링.

2. Component 기반 구조

Component는 독립적인 단위의 소프트웨어 모듈이다.
즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 볼 수 있다.

React는 UI(View)를 여러 컴포넌트(Component)를 쪼개서 만든다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성한다.

컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다. 따라서, 코드는 반복해 입력할 필요 없이 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가진다.

-> 마치 작은 레고 블록으로 거대한 집을 만들 듯, 프론트엔드를 만들어 가는 구조.

3. Virtual DOM

DOM은 Document Object Model의 약자로, 문서 객체 모델이라는 뜻이다.
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리한다.
React는 이 DOM Tree 구조와 같은 구조체를 Virtual Dom으로 가지고 있다.
(즉, Virtual DOM은 가상의 Document Object Model을 말한다.)

이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해 앱의 효율성과 속도를 개선할 수 있다고 한다.

-> 데이터가 변할 때마다 화면을 새로 띄우는 대신, 필요한 곳만 업데이트 해주는 형식. 빠른 로딩 속도와 반응성 높은 UI 구현가능.

4. Props and State

• Props
  Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.
  쉽게 읽기 전용 데이터라고 생각하면 된다. 자식 컴포넌트에서 전달받은 Props는 변경이 불가능하고, props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.

• State
  State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.
  State는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 State는 독립적이다.

5. JSX

JSX는 JavaScript와 XML을 조합한 문법이다. JSX는 컴포넌트의 구조와 동작을 '선언적'으로 작성할 수 있게 해준다.

-> '명령형' 프로그래밍 : '어떻게(How)' 처리할지를 하나하나 코딩하는 방식
-> '선언적' 프로그래밍 : '어떻게'보다 '무엇(What)'을 해야하는지를 지정하는 방식

이는 가독성을 높이고, 컴포넌트의 렌더링을 보다 직관적으로 이해할 수 있도록 도와준다.

React를 사용하는 이유

• JavaScript 기반의 문법을 사용하기 때문에 JavaScript에 익숙하다면 보다 쉽게 사용이 가능하다.

• 가상 돔과 다양한 최적화 기법을 활용하여 성능을 향상시킬 수 있다. 페이지 이동 시 발생하는 깜박임이나, 화면의 느려짐 등 사용자 경험을 개선하고 웹 애플리케이션의 반응성을 향상시킬 수 있다.

• 가볍고 유연한 라이브러리로, 필요한 부분에만 적용할 수 있다. 때문에 기존 프로젝트에 리액트를 통합하기 쉽게 만들어준다. 또한, 다른 프레임워크나 라이브러리와의 혼용도 가능하므로 기존 코드를 변경하지 않고도 리액트를 도입할 수 있다.

• 페이스북에서 개발한 오픈 소스 프로젝트로, 활발하고 다양한 커뮤니티와 생태계를 가지고 있다. 이는 문제 해결을 위한 자료와 지원을 쉽게 얻을 수 있으며, 라이브러리와 도구를 활용하여 개발 생산성을 높일 수 있다.

• React의 UI를 만드는 기능을 확장하여 웹이 아닌 플랫폼에서 활용할 수 있도록 기술을 확장했다. React Native는 안드로이드(Android)와 아이폰(iOS)의 모바일 앱을 만드는 대표적인 기술로 널리 사용되고 있다.

💚 reference : https://velog.io/@jini_eun/React-React.js%EB%9E%80-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC
https://www.elancer.co.kr/blog/detail/167