React , start !

heyho9292·2021년 9월 16일
0

React

목록 보기
1/18
post-thumbnail

React가 무엇인가

React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리다. 즉 React 프론트엔드 라이브러리다. component 기반이다. component에 데이터를 흘려보내면 UI가 조립되어 사용자에게 보여진다. 프레임워크 vue, angular와 다른점은 웹을 만드는데 꼭 필요한 도구를 전부 기본적으로 제공하지 않는다는 점이다.

component란?

프로그래밍에 있어 재사용이 가능한 각각의 독립된 UI모듈을 뜻한다.
컴포넌트 기반 프로그래밍을 하면 마치 레고 블록처럼 이미 만들어진 컴포넌들을 조합하여 화면을 구성할 수 있다.

React가 사용되는 이유

정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML문서를 클라이언트에게 전달하여 받은 페이지이다. 자기소개 페이지 등 단순히 정보를 전달하기 위한 페이지는 유저와의 인터랙션이 중요하지 않아 HTML과 CSS의 구성만으로도 충분히 멋진 웹서비스를 만들 수 있다.

동적인 페이지가 주를 이루게 된 요즘, 유저의 행동 흐름에 따라 웹페이지의 구성을 달리해주어야 한다. 인터랙션을 처리하기 위한 상태변화가 많아졌고 이를 자연스러운 유저 인터페이스로 만들어주기 위해 프론트엔드 라이브러리, 프레임워크가 등장한 것이다.

-> 웹이 점점 복잡해져서 더이상 감당이 안돼서...

CRA, node(+npm)를 설치해야 한다.

node란 브라우저에 종속된 프로그래밍 언어 JavaScript를 브라우저 밖에서 쓸 수 있도록 한 소프트웨어 플랫폼으로 밖에서, 백엔드에서 서버를 구축하는 등 코드를 실행할 수 있게 해주는 런타임 환경이다.
npm node package manager(줄여서 npm도 함께 설치된다.)

CRA
create react app.
리액트 개발환경을 편하게 구성하기 위한 툴체인이다.

설치가 되면, React에서는 JSX문법을 사용해 줘야한다.

JSX

HTML 문법을 JavaScript 코드 내부에 쓴 것.
JavaScript eXtension.. JavaScript의 확장 문법이고 결론은 자바스크립트이다.

리액트로 SPA를 만들거다.

SPA(Single Page Application)는 한 개(single)의 Page로 구성된 application 이고,
MPA(Multi Page application)는 여러 개(multi)의 Page로 구성된 application 이다.

MPA는 새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고,
그에 맞춰 전체 페이지를 다시 렌더링한다.

반면 SPA는 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드한다.
그 이후 새로운 페이지 요청이 있을 경우,
페이지 갱신에 필요한 데이터만 전달받아 페이지를 갱신한다.

SPA를 CSR(Client Side Rendering)방식으로,
MPA를 SSR(Server Side Rendering)방식으로 렌더링한다고 말한다.

이미지 출처 : https://velog.io/@thms200/SPA-vs.-MPA

SPA의 장점, 단점

장점

  • 좋은 사용자 경험
    - 전체 페이지를 업데이트할 필요가 없기 때문에 빠르다.
    - 전체 페이지를 업로드하면서 발생하는 깜빡거림이 없다.
    • 페이지의 일부만 바뀌기 때문에 application의 반응이 빠르다.
  • 개발하기에 더 심플
    • 서버의 사용없이도 개발을 시작할 수 있다.
    • 크롬으로 디버깅하기 쉽다.
  • 로컬 데이터를 효과적으로 캐시할 수 있다.
    - SPA는 서버에게 정적

단점

  • 초기 구동 속도가 느리다. 필요한 모든 정적 리소스를 한번에 받기 때문에.

SPA는 MPA(Multi Page Application) 대비 페이지 간 이동 시 사용자가 느낄 수 있는 딜레이를 제거해 일반적으로 더 나은 UX를 제공. (페이지 전체를 새로고침 하지 않기 때문! ← 매우 중요)

MPA의 장점, 단점

장점

  • SEO(search engine optimization, 검색 엔진 최적화) 관점에 유리하다.
    - 완성된 형태의 HTML파일을 서버로부터 전달받는다.
       검색 엔진이 페이지를 크롤링하기에 적합하다.

단점

  • 새로운 페이지를 이동하면 화면이 깜빡인다. 요청때마다 다시 렌더링 하기 때문.
  • 프론트와 백엔드가 밀접하게 연관되어있다. (개발이 복잡해질 수 있다.)
profile
이전 개업 ---> https://heyho92.tistory.com/

0개의 댓글