[Chapter 01] 리액트 소개

---

1️⃣ 리액트는 무엇인가?

💚 리액트의 정의

• 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리
  • 라이브러리: 자주 사용되는 기능을 정리해 모아 놓은 것

💚 다양한 자바스크립트 UI 프레임워크

• 앵귤러JS: 프레임워크, 지원 종료
• 리액트: 라이브러리, 지원 중
• 뷰JS: 프레임워크, 지원 중
• 프레임워크 vs 라이브러리
  • 프로그램 흐름에 대한 제어 권한
    1. 프레임워크는 개발자가 아닌 프레임워크에게
    2. 라이브러리는 개발자가 필요한 부분만 가져다 사용, 흐름에 제어 X

💚 리액트 개념 정리

• 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 기능 모음집
• SPA를 쉽고 빠르게 만들 수 있는 도구

---

2️⃣ 리액트의 장점

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

• Virtual Dom 사용 
  • 웹페이지와 실제 DOM 사이에서 중간 매개체 역할을 해줌
• 화면이 업데이트 된다 = Dom이 수정된다
  → 이게 성능에 안좋음
• 리액트는 업데이트해야 할 최소한의 부분만 검색해서 업데이트 함
  • 검색된 부분만을 업데이트하고 다시 렌더링 함

버츄어 돔 작동 방식

💚 컴포넌트 기반 구조

• 리액트는 모든 페이지가 컴포넌트로 구성되어있음
• 하나의 컴포넌트는 여러개의 컴포넌트의 조각으로 구성됨

빨간 네모 하나가 컴포넌트임

💚 재사용성

• 리액트는 컴포넌트 기반의 구조로 되어있음으로 재사용성이 높음
• 다른 모듈에 의존성이 없을 시 독립적으로 재사용이 가능
•  장점
  • 개발 기간 단축
  • 유지 보수 용이

---

3️⃣ 리액트의 단점

💚 높은 상태 관리 복잡도

• state
  • 리액트 컴포넌트의 상태
  • 리액트는 바뀐 부분만 검색해서 업데이트 함
    1. 여기서 바뀐 부분? = state가 바뀐 컴포넌트

💚 어려움

• 하지만 나는 해냄

---

💻 Reference

소플의 처음 만난 리액트 - 예스24