[React]React가 무엇이고 왜 사용하는가? + 라이브러리와 프레임워크

React란?

- 사용자 인터페이스(UI)를 만들기 위한 JavsScript 라이브러리

왜 React를 사용하는가?

✔️ Component 기반

- 컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, 생산성과 유지보수를 용이하게 한다.

컴포넌트를 사용하여 요소들의 변화에 쉽게 대응할 수 있고, 중복코드를 줄일 수 있으며 확장성이 좋다.

 

✔️ 선언형 프로그래밍

절차를 하나하나 나열하는 명령형 프로그래밍(예: jQuery)와 달리, 데이터가 변경됨에 따라 컴포넌트만 효율적으로 갱신하고 렌터링 한다. 선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 준다.

 

✔️ Virtual DOM

기존의 DOM은 페이지가 바뀔 때마다 새 HTML을 로드하면서 DOM 전체를 변경하는데 Virtual Dom은 실제 DOM과 비교해서 변경된 부분만 찾아내어 바꾸게 된다. 

 

React의 방향성

React를 이용하여 UI를 만드는 것은 Component들을 만들어 나가는 것이다.

재사용가능한 작은 단위의 Component들을 만들어 나가면서 각각의 페이지에서 필요한 Component들을 조립하는 것이다. 

• React Component = A highly cohesive building block for UIs loosely coupled with other components.
• React Components are reusable, composable and unit testable.

- React Componet는 다른 컴포넌트 들과는 coupling되어있지 않는, 느슨하게 결합되어 있지만 내부에서는 서로 매우 응집력이 있는 Component들로 만들어 나가야한다. 

- 재사용 가능하고, 구성 가능하며 단위 테스트가 가능하다.

 

⭐ 브라우저 동작원리

⭐DOM과 Virtual DOM 간단 설명

 

Angular, Vue와의 차이점

Angular

• TypeScript 기반의 오픈소스 프레임워크이다.
• 구글의 지원
• 양뱡향 바인딩을 지원한다.
• 체계적으로 잘 정리된 문서들
• 가장 배울 것이 많고 어려우며 자율성이 떨어진다.

Angular는 가볍고 빠르게 작업을 해야 하는 프로젝트보다는 큰 프로젝트에 사용하기 적합하다.

TypeScript를 기반으로 하기에 엄격하지만 그만큼 오류를 줄일 수 있다.

Vue

• 자바스크립트의 기본 스타일을 적극적으로 적용 (학습 및 적응이 빠르다)
• Virtaul DOM 지원
• 양방향 바인딩
• 빠르게 성장중인 커뮤니티

React의 장점인 Virtual DOM과 Angular의 양방향 바인딩을 가져온 프레임워크다.

자바스크립의 기본 스타일을 적용하여 학습과 적응이 쉽다. 가볍고 빠르게 개발이 필요할 때 좋을 거 같다.

 

프레임워크 VS 라이브러리

React는 사용자 인터페이스(UI)를 만들기 위한 JavsScript 라이브러리라고 앞서 설명했다. 프레임워크는 무엇이고 라이브러리는 무엇인가?

👌 프레임워크

원하는 기능 구현에 집중하여 개발할 수 있도록 일정한 형태와 필요한 기능을 갖추고 있는 골격, 뼈대를 의미한다.

웹 프레임워크는 UI를 만드는 것 뿐만 아니라 Routing, HTTP Clients, State management 등 어느 정도 뼈대(구조)를 제공하며 이러한 뼈대 위에서 사용자는 코드를 작성하여 애플리케이션을 개발한다. 웹에서 대표적인 프레임워크는 Angular이다. Spring, Android 등도 프레임워크이다.

 

👌 라이브러리

소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 비휘발성 자원의 모임. 즉 특정 기능을 모와둔 코드, 함수들의 집합이며 코드 작성 시 활용 가능한 도구들을 의미한다. React는 웹을 만드는 다양한 문제들 속에서 UI를 담당한다. React를 만들면서 네트워크 통신이 필요하면 fetch나 다른 라이브러리를 사용하고, Routing이 필요하면 Routing 라이브러리를 사용하면 된다. 즉, 자율성이 보장된다.

 

 

추천 글