React의 장점은 무엇이있나요?
React 란?
react는 페이스북에서 제공해주는 프론트엔드 라이브러리로, 사용자 인터페이스를 만들기 위해 사용합니다.
- component 기반
- 싱글 페이지 애플리케이션이나 모바일 애플리케이션의 개발에 사용
React의 특징
1. Component 기반 구조
React는 UI를 여러 component로 쪼개서 구성합니다.
한 페이지 내에서 여러 부분을 독립적인 component로 만들고, 이 component를 조립하여 화면을 구성하는 방법을 사용합니다.
component 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기가 상대적으로 쉬우며
독립적인 component로 쪼개져 있는 구조이기 때문에, 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 component만 수정하여 사용 할 수 있습니다.
따라서 코드의 재사용성과 유지보수성이 좋습니다.
2. Data flow
데이터의 흐름이 한 방향 (부모 -> 자식)으로 흐르는 단반향 데이터 (one-way-data flow)
데이터가 내려가기만 하고 자식에서 부모로 데이터를 올려줄 수 없기 때문에 부모의 데이터를 바꾸기 위해서는 state를 이용해야 한다.
Props
- 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터를 의미, 읽기 전용 데이터
- 자식 컴포넌트에서 전달받은 props는 변경이 불가능 하고, props를 전달한 최상위 부모 컴포넌트 에서만 props의 변경이 가능하다.
State
- 컴포넌트 내부에 선언해 내부에서 값을 변경할 수 있다.
- 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야 할 때 사용합니다.
- 독립적이기 때문에 다른 component의 접근이 불가능, 그러나 자신보다 상위에 있는 state는 변경이 가능(state를 변경해주는 함수를 props로 받아 사용하면 된다)
3. Virtual DOM
가상의 Domcument Object Mode로 실제 DOM을 조작하는 것이 아니라, DOM을 추상화 한 js객체를 구상해 사용한다.
- DOM == Document Object Model
HTML, XML, CSS 등을 트리 구조로 인식하고, 데이터를 객체로 간주해 관리한다.
이벤트가 발생할 때 마다 Virtual DOM을 만들고, 다시 그릴 때 마다 실제 DO과 비교하여 전후상태를 비교해, 변경이 필요한 최소한의 변경사항만 실제 DOM에 반영하는 방식을 사용해, 앱의 효율성과 속도를 개선
React의 장점
- React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.
- Controller, directive, template, model, view 처럼 로직을 분리하는 것이 아닌, Component 하나로 관리를 한다. (이게 view 역할을 담당)
- 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능을 지원한다.
- UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있다.
- 다른 framework나 라이브러리와 병행해서 사용할 수 있다. 이는 개발이 이미 완료된 프로젝트에도 적절히 녹여낼 수 있는 확장성도 포함한다.
