SOAPLE 처음 만난 리액트 (1 ~ 5, 6 ~ 7, 8 ~ 9)

SPA (Single Page Application)

모던 웹의 패러다임, 단일 페이지로 기존 서버 사이트 렌더링과 비교하여 배포가 간단하며 네이티브 앱과 비슷한 사용자 경험을 제공할 수 있다.

 

웹 앱에 필요한 모든 정적 리소스를 한번에 다운로드하여 페이지 간 이동 시 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있다.

 

전체 페이지가 아닌 변경되는 부분만 갱신하므로 새로고침이 발생하지 않아 네이티브앱과 유사한 UX를 제공할 수 있으므로 모바일 웹에 최적화 된 방식이기도 하다.

 

하지만 필요한 모든 정적 리소스를 최초에 1번만 다운로드하기 때문에 초기 구동속도가 느린 편이며

SEO(검색엔진 최적화) 문제가 존재한다.

SPA은 서버 렌더링 방식이 아닌 자바스크립트 기반 비동기 모델(클라이언트 렌더링 방식)이기에 처음 받은 웹페이지의 소스코드가 거의 비어있어 검색이 잘 안될 가능성이 크다.

-> React나 Angluar 등의 프레임워크에는 서버 렌더링을 지원하는 SEO 기술이 이미 존재함.

 

 

MPA (Multi Page Application)

link 태그를 사용하는 전통적인 웹 방식으로 새로운 페이지를 요청할 때마다 정적 리소스를 다운로드 하여 전체 페이지를 다시 렌더링하므로 새로고침이 발생되어 사용성이 좋지 않다.

페이지에서 필요 없는 부분을 포함하여 전체를 갱신하므로 비효율적이며 추후 모바일 앱 개발 시 추가적인 백엔드 작업이 필요하므로 개발 생산성이 좋지 않을 수 있다.

 

다만 SPA 와 반대로 SEO에 친화적이라, 네이버나 구글 같은 검색 사이트에 노출 되는 것이 중요하다면 MPA가 좋다.

 

즉 기존의 MPA 을 React를 활용하여 SPA으로 나타내주는 것!

---

node.js

자바스크립트로 네트워크 어플리케이션을 개발할 수 있는 환경

 

npm(node pakage manager)

node.js의 패키지 매니저로, 프로젝트에서 필요한 버전과 의존성을 관리해줌 (node.js를 설치하면 자동적으로 설치됨)

버전 확인

 

 

---

React 란?

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

-> 자주 사용되는 기능들을 모아놓은 것을 라이브러리라고 한다.

 

Angular.js - 구글 -> 프레임워크

React.js - 페이스북 -> 라이브러리

Vue.js - 개인 중국 개발자 -> 프레임워크

 

 

프레임워크? 라이브러리?

프로그램 흐름에 대한 제어권의 유무에 따라,

프레임워크는 프로그램의 흐름에 대한 제어권을 프레임워크가 가지고 있는 것

라이브러리는 제어권을 개발자가 가지고 있는 것, 즉 개발자가 필요한 부분만 채용할 수 있는 것

 

웹 개발의 트렌드?

웹 사이트의 작동 원리와 흐름을 함께 이해하는 것이 중요함

 

 

 

리액트의 장점

빠른 업데이트와 빠른 렌더링 속도

 

Virtual DOM(가상DOM)을 사용 - 연산비용 감소

Component-Based

조립하듯 컴포넌트들을 모아서 개발이 가능

 

재사용성(Reusability)

다른 개발 환경에서도 동일한 기능을 수행할 수 있도록 만들어진 것 (호환성은 높이고 의존성은 낮추고)

-> 개발 기간이 단축됨

-> 유지 보수가 용이함

즉, 리액트는 컴포넌트 형태므로, 각 컴포넌트의 의존성이 낮아 재사용성이 높은 것이다.

 

https://github.com/facebook/react

GitHub - facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.

 

React Native

리액트를 활용하여 모바일 앱도 개발 가능 (안드로이드, iOS 둘다 ok)

 

 

리액트의 단점

방대한 학습량 (Virtual DOM, JSX, Component, State, Props...)

 

버전 업데이트마다 학습이 필요

 

높은 상태관리 복잡도 -> State -> Redux 등 상태 관리를 위해 추가 학습이 필요

 

 

 

---

리액트 시작하기

 

기존 html 파일에 dom container를 추가해줘야 한다.

가상 DOM의 시작점이 된다.

<div id="root"></div>

이는 root dom node 라고도 한다.

 

 

https://ko.reactjs.org/docs/add-react-to-a-website.html

웹사이트에 React 추가 – React

<!-- React 가져오기 -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<!-- React 컴포넌트 실행하기 -->
<script src="./MyButton.js"></script>

 

function MyButton(props) {
  const [isClicked, setIsClicked] = React.useState(false);

  return React.createElement(
    'button',
    { onClick : () => setIsClicked(true) },
    isClicked ? 'Clicked!' : 'Click here!'
  )
}

const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);

이런 식으로 버튼을 컴포넌트화 해서? 추가해줄 수 있다.

이 방식은 기존에 있는 html 파일에 react를 추가하는 것이다.

 

---

그렇다면 새로이 만드는 html 파일에서는 이런 방식이 아닌,

create-react-app(CRA)을 사용하여 처음부터 react를 사용할 수 있도록 설정을 해준 다음 개발을 시작할 수 있다.

 

npx를 사용하여 다운 받을 수 있는데, npx는 npm의 기능에서 실행까지 추가한거라고 한다.

npx(excute npm package binaries)

 

npx create-react-app [프로젝트명]

형식으로 cra을 설정해줄 수 있다.

설정이 완료되면 아래같이 뭔가가 잔뜩 생겼다.

해당 파일로 터미널을 이동한 다음,

npm start 를 해주면 브라우저 상에 React App 이 실행된다.