React 소개

React

A JavaScript library for building user interface
사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

❗❗ 즉, 리액트는 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 기능 모음집

* 라이브러리(Library)?
  - 특정 프로그래밍 언어에서 자주 사용되는 기능들을 정리해 모아놓은 것 
* 사용자 인터페이스(UI, User Interface)?
  - 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입출력을 제어해주는 것
  ex) 웹사이트의 버튼, 텍스트 입력창 등
* JavaScript UI Library 종류
  - 프레임워크 : AngualrJS, Vue.js, Next.js
  - 라이브러리 : React
  - 프레임워크(프레임워크) vs 라이브러리(개발자)
    - 프로그램의 흐름에 대한 제어 권한의 차이
    - 라이브러리는 흐름에 대한 제어를 하지 않고 필요한 부분만 가져다 사용

SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구, React

❗❗ SPA는 하나의 HTML 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 그 안에 해당 페이지의 내용을 채워서 보내줌

리액트의 장점

👍 빠른 업데이트 & 렌더링 속도

• 빠른 업데이트를 위해 Virtual DOM(Document Object Model) 사용
  • Virtual DOM : 웹페이지를 정의하는 하나의 객체. 즉, 하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇
  • State Change가 일어나면 Virtual DOM은 업데이트해야 할 최소한의 부분을 검색(Compute Diff)한 후 검색된 부분만 업데이트하고 다시 렌더링(Re-render)하면서 변경된 내용을 빠르게 사용자에게 보여줌

👍 Component-Based

• 리액트는 컴포넌트로 구성되어 있고 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있음

👍 재사용성 (Reusability)

• 개발기간이 단축됨
• 유지 보수가 용이함
• 리액트는 컴포넌트 기반의 구조이기 때문에 하나의 컴포넌트가 계속해서 재사용될 수 있음

👍 Meta라는 든든한 지원군

• 리액트는 Meta가 만든 오픈소스 프로젝트로 꾸준한 버전 업데이트가 이루어짐

👍 React Native

• React Native라는 모바일 환경 UI 프레임워크를 사용해서 모바일 앱 개발 가능

리액트의 단점

👎 계속 업데이트 됨(새로운 학습 요구), 높은 상태관리 복잡도

참고: 인프런 처음 만난 리액트(React)