리액트 강의를 수강하고 정리한 내용입니다.
1. 리액트란 무엇인가?
공식 문서에 보면 상단에 다음과 같이 적혀있다.
리액트는 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. 즉, 웹에서 앱과 같은
사용자 경험을 만들 수 있도록 도와준다.
리액트를 왜 사용하는 걸까?
이전의 웹 방식은 서버 사이드 랜더링 (CRA) 이라고 해서 사용자가 요청을 할 때마다 리소스를 다시
다운 받아 리랜더링하는 방식이었다. 이러한 방식은 필요없는 부분을 포함하여 비효율적이다.
이러한 것을 해결하기 위해 클라이언트 사이드 랜더링(SPA)이란 방식이 등장하게 되었다.
SPA은 SinglePageApplication의 약자로 단일 페이지로 구성되며 로딩될 때 전체 페이지에 필요한
리소스를 최초 한번 다운 받고, 필요한 부분만 서버측에 요청해서 랜더링되므로 앱과 유사한 사용자
경험을 느낄 수 있다.
이 SPA 을 만드는 데 도움을 주는 것이 앵귤러, 뷰, 리액트 프레이임워크 이다.
(리액트는 라이브러리에 속한다.)
2. 리액트 특징
1. 가상돔을 사용
◎ 가상 돔은 이전 UI 상태를 메모리에 저장하여 변경된 부분만 실제 돔에 반영해 준다.
2. 앱과 같은 사용자 경험 구현
◎ 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리이다.
3. 재사용성 컴포넌트
◎ 중복된 코드를 컴포넌트화해서 작성할 수 있고, 유지보수하기 좋다.
4. 데이터 - 화면 일치
◎ 데이터를 브라우저 화면에 반영할 때 변경전 데이터와 변경 후 데이터를 쉽게 반영해 준다.
프론트엔드 프레임워크 3대장에 대해 알아보기 !!
[Angular]
- 특정 기능을 구현시 편리하게 해주는 기능들이 있다.
- 라우터 HTTP클라이언트 등 웹프로젝트에서 필요한 대부분의 도구들이 내장되어있다.
- 앵귤러1의 경우 만들어진지 오래되었고 그만큼 많은 기업에서 사용되고 있다.
- 유지보수하고 있는 프로젝트가 많아 사용률이 높다.
- 앵귤러2의 경우 아직 인지도에서 아직 성장중, 주로 타입스크립트와 함께 사용됨
[Vue]
- 입문자가 사용하기 편하다.
- 대부분 Webpack 같은 모듈 번들러를 사용하여 프로젝트를 구성해야하는 앵귤러와는 달리
단순히 CDN에 있는 파일을 로딩하는 형태로 스크립트를 불러와서 사용
- HTML을 템플릿처럼 그대로 사용 할 수도 있어서 마크업을 만들어주는 디자이너/퍼블리셔가
있는 경우 현업하기 좋다.
[React]
- "컴포넌트"라는 개념에 집중이 되어있는 라이브러리
컴포넌트: 데이터를 넣으면 우리가 지정한 유저 인터페이스를 조립해서 보여준다.
- MVC
- 생태계가 엄청 넓고, 사용하는 곳도 많다.
단, HTTP클라이언트, 라우터, 심화적 상태관리 기능은 내장 되어 있지 않다. 그래서
개발자가 원하는 스택을 맘대로 골라서 사용할 수 있다. 혹은 직접 만들어서 사용할 수 있다.
👍 자바스크립트만으로 프로젝트를 구현해보았다면, 프론트엔드 라이브러리(프레임워크)를 사용해서
프로젝트를 진행해보는 것도 좋다.
사용사용자 인터페이스를 만들기 위한 JavaScript 라이브러리자 인터페이스를 만들기 위한 JavaScript 라이브러리
'Frontend study > Reactjs' 카테고리의 다른 글
리액트 - 5. Props와 State (0) | 2022.07.03 |
---|---|
리액트 - 6. 리액트에 조건문 사용하기 (0) | 2022.07.03 |
리액트 - 4. JSX 문법 (0) | 2022.05.03 |
리액트 - 3. 컴포넌트 만들기 (0) | 2022.04.28 |
리액트 - 2. 작업환경 세팅하기 (0) | 2022.04.20 |