리액트(React) 기초와 관련 용어 정리

리액트(React)

• A javaScript library for building user inerfaces
• 사용자 인터페이스를 만들기 위한 자바스크립트의 UI 라이브러리이다.
• SPA를 쉽고 빠르게 만들 수 있게 도와주는 도구이다.

 

 

특징

장점

• 빠른 업데이트 & 렌더링
• Virtual DOM을 사용한다.
• 컴포넌트로 구성되어 있기 때문에 레고 블록을 조립하듯이 컴포넌트를 모아 개발한다.
• 하나의 컴포넌트는 다른 곳에서 재사용될 수 있다.
• 이 덕분에 개발 기간이 단축되고 유지 보수가 용이하다.

 

단점

• 방대한 학습량(Vitual DOM, JSX, Component, State, Props 등등)
• 높은 상태관리 복잡도를 가진다.

 

 

간단 용어 정리

프로그래밍에서의 라이브러리?

• 쉽게 말해서 자주 사용하는 기능을 모아둔 것을 뜻한다.

 

사용자 인터페이스(User Interface, UI)

• 사용자와 컴퓨터 프로그램이 서로 상호작용할 때 그 중간에서 입출력 제어를 도와주는 것을 말한다.

 

 

SPA(Single Page application)

• 하나의 웹페이지를 기반으로 작동한다.
• 웹에 필요한 모든 정적 리소스를 최초에 다운로드하고 페이지 간에 이동할 때 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하는 방식을 사용한다.
• 전체 페이지를 다시 렌더링 하지 않고 변경되는 부분만 갱신하므로 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.
• 이러한 특징으로 인해 모바일 웹에 최적화되어 있다.
• 속도, 사용성, 반응성이 MPA(Multi Page Application)에 비해 뛰어나다.

 

 

DOM(Document Object Model, 문서 객체 모델)

• 웹페이지(HTML이나 XML)의 콘텐츠 및 구조, 스타일 요소를 구조화시켜 표현하여 프로그래밍 언어가 해당 문서를 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다.
• 자바스크립트가 쉽게 웹 페이지에 접근하여 조작할 수 있게 연결시켜 주는 역할을 한다.

 

Virtual DOM

• 가상의 DOM으로서 웹페이지와 실제 DOM 사이에서 매개체 역할을 한다.

 

 

 

create-react-app이란?

• 리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어있는 상태로 프로젝트를 생성해주는 도구이다.

 

 

create-react-app 사용해보기

# 리액트 프로젝트 생성
npx create-react-app <your-project-name>

# 실제 사용 예제
npx create-react-app my-app

# 프로젝트 실행(프로젝트가 있는 경로로 들어가서)
npm start

 

 

 

참고

인프런 - 처음 만난 리액트

https://www.codestates.com/blog/content/dom-javascript

https://velog.io/@gwanuuoo/SPA는-기존-웹사이트와-차이