[React] React 란?

React란?

- 사용자 인터페이스(UI)를 만들기 위해 사용되는 자바스크립트 라이브러리

- 싱글 페이지 애플리케이션(Single Page Application, SPA) 개발에 주로 사용

- Virtual DOM과 JSX라는 독특한 개념을 사용하여 동작

- 컴포넌트(Component)라고 불리는 작은 코드 모음을 활용하여 복잡한 UI를 손쉽게 구성 가능

- Angular, Vue.js와 함께 전세계 프론트엔드 개발자들에게 가장 많은 사랑을 받고 있는 웹 프론트엔드 프레임워크의 하나

 

React 이해하기

 

싱글 페이지 애플리케이션(SPA)

- 기존의 웹 앱은 대부분 멀티 페이지 애플리케이션(Multiple Page Application, MPA) 방식으로 개발, 하나의 애플리케이션이 여러 개의 웹 페이지로 구성

- MPA 방식의 웹 앱에서는 클라이언트(웹 브라우저)가 새로운 페이지를 요청할 때마다 서버로부터

 정적 리소스(static resource)를 내려받아 매번 전체 페이지를 리렌더링(re-rendering) 함

 

- SPA 방식의 웹 앱은 단 한 개의 페이지만으로 구성

- SPA 방식의 웹 앱에서는 애플리케이션에 필요한 모든 정적 리소스를 최초 단 한 번만 다운로드하여 렌더링 함

- 이후 새로운 페이지에 대한 요청이 있을 때에는 페이지 갱신에 필요한 데이터만을 내려받아 리렌더링 함

 

차이점

-  MPA 방식의 웹 앱은 새로운 페이지를 요청할 때마다 전체 페이지를 리렌더링하기 때문에 페이지를 요청할 때마다 리로딩(reloading, 새로고침)이 발생

- SPA 방식의 웹 앱에서는 페이지에서 필요한 부분만을 따로 내려받아 페이지를 리렌더링 하기 때문에 리로딩이 발생하지 않음

 

SPA 방식의 웹 앱의 단점

1) 최초 단 한 번에 모든 정적 리소스를 내려받기 때문에 초기 구동 속도가 느림
2) 페이지가 동적으로 갱신되기 때문에 검색엔진 최적화(SEO)가 매우 어려움

 

React의 핵심 요소

- React는 Virtual DOM이라는 새로운 개념을 활용하여 View에서 변경되어야 할 부분만을 효율적으로 업데이트할 수 있도록 고안 됨

- 자바스크립트 문법을 확장한 JSX라는 문법을 사용함으로써 불필요한 코드를 줄여 개발 생산성을 높임 또한 UI를 컴포넌트라는 개별적인 여러 개의 코드 모음으로 나누어 관리함으로써 재사용성과 유지보수가 쉬움

 

라이브러리? 프레임워크?

라이브러리(library)

- 애플리케이션을 개발할 때 단순 활용이 가능한 도구(기능)들의 집합

  (자주 사용되는 기능들을 객체나 함수 등의 라이브러리 형태로 만들어 놓으면 나중에 필요할 때마다 해당 기능을 호출하여 사용 가능)

 

프레임워크(framework)

- 개발자가 원하는 기능 구현에만 집중할 수 있도록 필요한 기본 구조와 구성을 모두 포함하고 있는 일종의 틀(뼈대)

- 개발에 필요한 데이터 모델링, 메모리 관리 등 공통된 부분은 프레임워크가 관리

- 개발자는 프레임워크가 정해준 방식대로 필요한 기능들을 구현