리액트 - 1. 리액트 시작하기

 

 

 

  리액트 강의를 수강하고 정리한 내용입니다. 

  

 

 

 

 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 라이브러리