[React] 리액트(React)를 알아보자

▶리액트(React)를 알아보자

리액트 프로젝트 파일을 생성하기 전에 리액트가 무엇인지, 구동원리는 무엇인지, 핵심 컨셉은 무엇인지! 등에 대해 알아보려고 합니다🙂!

 

🔎 React ?

---

React란 복잡한 사용자 인터페이스(UI)를 쉽게 구축하기 위해 페이스북에서 제작한 라이브러리 입니다.

 

📌 라이브러리 ? (도서관 = 모듈들의 집합)

간혹 프레임워크와 라이브러리가 혼동될 때가 있는데요. 같이 알아봅시다!

 

프레임워크
코드를 작성할 때 필요한 틀을 제공해 주는 것
따라서 개발을 할 때 제어권이 개발자가 아닌 프레임워크에게 존재.
개발할 때 프레임워크가 가지고 있는 규칙에 의해 작성
ex) Spring, Django, nextJS, nuxtJS

 

라이브러리
같은 로그인 로직이라 하더라도 passportJS, gotrue 등
사용자는 특정 정해져있는 코드를 사용하는 것이 아니라 필요로 하는 라이브러리를 선택해서 코드를 적용
ex) nodeJS에 설치되는 모든 패키지와 reactJS, jquery

 

🔎 React의 JS 구동원리

---

리액트 Components와 Virtual DOM이라는 핵심 컨셉을 가지고 있는데요.

→ 리액트는 컴포넌트와 가상 돔을 통해 구동된다

 

📌 Components(컴포넌트)

컴포넌트는 하나의 페이지를 한 가지 이상의 기능을 수행하는 UI 단위로 분리한 것을 의미합니다.

재사용이 용이하고 관리 및 유지 보수에 효율적입니다.

 

만약 여러 페이지에서 똑같은 형태와 똑같은 기능을 하는 버튼이 여러 개 존재한다고 하면

컴포넌트 없이는 일일이 코드를 작성해 주어야 하며 유지보수를 할 때에도 일일이 수정을 해줘야 할 것입니다.

 

그렇지만 리액트의 컴포넌트를 사용하면 이 동일하고 여러 페이지에서 사용하는 버튼을

하나의 컴포넌트로 관리할 수가 있게 됩니다.

정의해둔 컴포넌트를 불러와서 사용만 하면 되고

유지보수를 할 때에도 정의해둔 컴포넌트 파일로 돌아가 수정만 해준다면

그 컴포넌트를 사용하고 있는 모든 페이지의 컴포넌트가 모두 한꺼번에 수정될 것입니다.

 

📌 Virtual DOM(가상돔)

리액트가 가지고 있는 가상돔은 돔의 복사본이라고도 볼 수 있습니다.

리액트에서는 state(상태)를 구독(=감시)하고 있는데요.

만약 state의 변화가 생긴다면 그때 가상돔과 실제돔을 비교하여 수정된 부분만을 실제돔에 리렌더링하게 됩니다.

 

리액트가 가상돔을 실제돔에 리렌더링 하는 과정은 다음과 같습니다.

 

1. state에 변화가 감지되었다. 변화된 버전을 가상돔으로 바꾸자.
2. 변화 전의 가상돔과 변화된 가상돔을 비교한다.
3. 바뀐 부분만 실제돔에 리렌더링하여 적용하자. 

 

사실 이 말은 가상돔이 바뀌어서는 실제 화면은 바뀌지 않는다는 말과 같습니다.

 실제돔에 리렌더링이 되어야만 실제 화면이 바뀌게 됩니다.

 

🔎 리액트는 대표적인 CSR, SPA !

---

📌 CSR과 SSR

1️⃣ CSR (Client Side Rendering)

클라이언트 사이드 렌더링은 클라이언트에서 렌더링을 진행하는 것을 의미합니다.

이때 서버로 부터 응답 받은 데이터를 렌더링을 하게 되는 것인데요.

 

장점

• 페이지의 필요한 리소스를 사전에 미리 불러와 데이터를 캐싱(저장)하고 있다가 URL에 맞는 페이지를 보여줌
  • 따라서 초기 렌더링 이후의 렌더링 속도가 빠름

 

단점

• 초기 페이지 로딩이 SSR보다 느림
• SEO(검색엔징최적화)에 불리 → 검색엔진에 노출이 필요한 사이트 부적합
  
  • 페이지가 검색엔진이 검색하였을 때 빈화면이 노출되기 때문

 

2️⃣ SSR (Server Side Rendering)

서버 사이드 렌더링은 서버에서 렌더링을 진행하는 것을 의미합니다.

사용자가 웹 페이지에 접속하면 서버에서 페이지를 렌더링하고 그 렌더링된 페이지를 사용자에게 전달하는 과정을 거칩니다.

그렇기 때문에 js가 로드되기도 전에 완성된 페이지를 사용자가 먼저 확인하게 되는데요.

 

장점

• SEO 유리 → 웹 사이트를 검색엔진이 크롤링하여 사용자에 제공 가능
• 빠른 완성본 페이지 로딩 속도
• 서버에서 렌더링을 부담하기 때문에 사용자가 느끼는 부담이 덜함

 

단점

• 서버의 부담 (생산 비용 증가)
• 무거운 페이지라면 오히려 초기 로딩이 CSR보다 오래 걸릴 가능성
• CSR보다 더 많은 생산비용, 초기 러닝 커브

 

📌 SPA와 MPA

1️⃣ SPA (Single Page Application)

페이지 하나인 애플리케이션입니다. → .html 파일이 1개

최초 한번 페이지 전체를 로딩한 이후 부터는 url이 달라짐에 따라 html 내부를 수정하여 사용자에게 보내주게 됩니다.

 

그리고 이를 캐싱해 두었다가 url이 달라짐에 따라 html의 내부를 수정하여 사용자에게 보내주게 되는 것인데요.

 

따라서 통상적으로 리액트의 파일 구조는 index.html 하나로만 구성되어 있습니다.

 

2️⃣ MPA (Multi Page Application)

페이지가 여러 개인 애플리케이션입니다. → .html 파일이 여러 개

보통은 SSR 방식으로 요청마다 해당 페이지에 필요한 리소스를 불러옵니다.