💠What is React?

#️⃣React란?

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리

💠라이브러리 vs 프레임워크

• 라이브러리: 어떤 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것

• 프레임워크: 어떤 특정 기능을 모듈화 해 놓은 것 라이브러리 ⊂ 프레임워크 프레임워크는 라이브러리를 포함하고 작성한 코드를 호출한다. 그리고 그 코드는 기능을 구현하기 위해 라이브러리를 호출한다.

Rreact가 프레임워크가 아닌 라이브러리인 이유

react는 전적으로 UI를 렌더링 하는데 관여하기 때문이다. (view)

그래서 페이지 이동(라우팅), 상태 관리 등을 하기 위해 react-router-dom, redux, recoil 등의 라이브러리를 사용한다.

🤔React를 사용하는 이유

• 상대적으로 배우기 쉬움

• 여러 기능을 위해 이미 만들어져 있는 라이브러리 환경

• 많은 기업들의 사용으로 검증 된 라이브러리(ex. 페이스북)

• JSX(Javascript syntax extension) 사용 자바스크립트 코드에서 명시적 HTML 구문을 직접 활용할 수 있다. 즉, 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다. (기본 UI에 데이터가 변하는 것이나 이벤트들이 처리되는 부분 쉽게 구현 가능) (In detail) createElement를 쉽게 사용하기 위해 모든 UI마다 createElement를 사용x (번거로움, 어려움) ∴ jsx 사용 후 바벨이 이것을 자동으로 createElement(요소 이름, 내용)를 만들어줌

• SPA(Single Page Application) 구현 가능 html 파일을 1개만 쓰고 다른 페이지로 이동할 때 html 부분만 바꾸어 보여준다 → 부드럽게 동작 JS로만 작성 시 코드가 너무 길어진다. 그래서 자바스크립트 라이브러리인 리액트를 사용한다.

• CSR(Client-Side Routing)

  React에서는 React Router와 같은 라이브러리를 사용해 CSR 구현

  이는 브라우저의 URL 변화를 감지하고, JS를 통해 필요한 부분만 로드하고 렌더링한다. → 페이지 전환이 빠르고 부드럽다.

• Virtual DOM 렌더링 시 변경된 부분만 실제 DOM에 적용시켜 불필요한 작업을 최소화하고 성능을 향상시키는 데 도움을 준다.

• 코드 재사용 Html을 함수, array, object에 보관하여 재사용 할 수 있다. → 대규모 프로젝트일수록 html 관리가 편리해진다.

• React 기반의 다른 프로젝트와 호환 재사용 가능한 고유한 객체, 즉 컴포넌트를 만들어 React 기반의 다른 프로젝트에 활용할 수 있다. → 여러 프로젝트 간에 일관성 있는 코드와 구조를 유지하면서 개발을 진행할 수 있다. → 필요에 따라 수정하거나 확장하여 다양한 기능을 구현할 수 있다. 이렇게 하면 코드의 재사용성과 유지보수성을 향상시킬 수 있다.

• React Native 같은 리액트 문법으로 모바일 앱개발도 가능하다. (Html, CSS문법만 약간 다름)

---

🤍🩶용어 정리🩶🤍

🩶JSX: Javascript를 확장한 문법 🤍createElement: HTML 문서에 새로운 요소를 동적으로 생성하는 JavaScript의 메서드

#️⃣컴포넌트란?

리액트로 만들어진 앱을 이루는 최소한의 단위

• 장점 - 재사용이 용이함(여러 곳에서 사용 가능) - 여러 명이 맡은 컴포넌트를 동시에 수정할 수 있음

• 종류 클래스형 / 함수형 클래스 처음에는클래스형 사용하다 hooks가 발표되면서 함수형 컴포넌트 사용

#️⃣SPA(single page application)

웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 것

(이전에는 한 페이지당 하나의 html 파일) index.html

js파일에서 root를 잡아 사용

• 장점 빠른 속도, 향상된 유저 경험, 효율적인 캐싱, 더 적은 서버 리소스(자원)사용, 간소화된 개발 프로세스

• 단점 낮은 SEO, 최초 로딩 시간, 브라우저 기록 저장, 너무 커지는 자바스크립트 파일의 사이즈

🤔SPA에서 화면 변경 방법

HTML5의 History API 사용 → React-Router-Dom이 History API를 사용하는 것

---

참고 사이트

SPA가 무엇이고 어떤 장점과 단점이 있을까?