React 란?
React는 웹 프레임워크로, 자바스크립트 라이브러리 입니다.
facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있습니다.
싱글 페이지 애플리케이션이나 모방리 애플리케이션의 개발 시 토대로 사용될 수 있습니다.
즉, 현재 많이 활용되고 있는 웹/앱의 View를 개발할수 있도록 하는 인기있는 라이브러리라고 볼 수 있습니다.
React를 쓰는 이유?
- 가상 DOM을 사용하여 실제 DOM의 변경사항을 최소화합니다. 이를 통해 빠른 성능을 유지하면서도 효율적인 UI 업데이트를 가능하게 합니다.
- 컴포넌트 기반의 아키텍처를 채택하여 UI를 재사용 가능한 작은 단위로 분할하고 관리할 수 있게 합니다. 이로 인해 코드의 유지보수가 용이해지고, 개발 효율성이 향상됩니다.
- 단방향 데이터 흐름을 사용하여 데이터의 흐름을 예측 가능하게 만듭니다. 이로 인해 상태 관리가 간소화되며, 예측 가능한 UI를 구성할 수 있습니다.
- Facebook에서 지원하고, 광범위한 개발자 커뮤니티가 활발하게 활동합니다. 이로 인해 다양한 라이브러리, 도구, 플러그인 등의 생태계가 발전하였습니다.
- 다른 라이브러리나 프레임워크와 함께 사용될 수 있으며, 개발자가 필요에 따라 라이브러리를 선택하여 프로젝트를 구성할 수 있습니다.
- JSX는 JavaScript의 확장 문법으로, UI를 선언적이고 직관적으로 작성할 수 있게 합니다. 이로 인해 UI 코드의 가독성과 유지보수성이 향상됩니다.
Web-app의 장점?
- 모바일앱으로 발행이 쉬움
- 앱처럼 뛰어난 UX
- 사용자들에게 빠르다는 느낌과 긍정적인 느낌을 줄 수 있다. ⇒ 그냥 웹사이트보다 비즈니스적인 강점
React의 특징
- Data Flow
React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다.
Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다. - Component 기반 구조
Component란 독립적인 단위의 소프트웨어 모듈을 말합니다.
React는 UI(View)를 여러 컴포넌트(component)를 쪼개서 만듭니다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트를 조립해 화면을 구성합니다.
컴포넌트 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉽습니다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높습니다. 따라서 코드는 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며, 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이해지는 장점을 가집니다.
- Virtual DOM
DOM은 html, xml, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주하고 관리합니다.
React는 이 DOM Tree 구조와 같은 구조체를 Virtual DOM으로 가지고 있습니다.
이벤트가 발생할 때마다 Virtual DOM을 만들고, 다시 그릴 때마다 실제 DOM과 비교하고 전후 상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영해, 앱의 효율성과 속도를 개선할 수 있다고 합니다.
- Props and State
- Props
Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말합니다.
읽기 전용 데이터를 뜻합니다. 자식 컴포넌트에서 전달받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있습니다. - State
State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있습니다. state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용합니다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적입니다.
- Props
- JSX
Javascript를 확장한 문법입니다. JSX를 사용하면 JavaScript 내에서 XML 또는 HTML과 유사한 구조를 작성할 수 있어, UI 컴포넌트를 선언적이고 직관적으로 작성할 수 있게 합니다. JSX 사용이 필수가 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 시각적으로 더 도움이 됩니다. 또한 JSX를 사용하면 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.
'Project 댕린이집' 카테고리의 다른 글
| React의 Component를 알아보자 (0) | 2024.01.01 |
|---|---|
| React의 폴더 구조 (0) | 2023.12.31 |
| VSCODE에서 node.js를 통해 React를 불러오기 (1) | 2023.12.28 |
| CORS (0) | 2023.12.27 |
| ERD 설계 (0) | 2023.12.23 |
