모던 리액트 Deep Dive - 들어가기 전

⚡들어가기전 

🌕리액트의 특징

a. 명시적인 단방향 상태 변경

• 리액트는 단방향 바인딩만 지원
• 양방향 바인딩(Angular)은 뷰와 컴포넌트가 서로 영향을 줌
• 단방향 바인딩이 줄 수 없는 편리함을 주지만, 프로젝트 규모가 커진다면 상태의 변화 원인을 파악하기 어려움
• 단방향 바인딩 단점 : 항상 변화를 감지하고 업데이트하는 코드를 작성해야한다. 즉, 코드의 규모가 커짐

b. JSX(Javascript XML)

• 기존 Javascript 문법에 HTML을 약간 가미한 문법으로 몇 가지 특징만 이해하면 JSX 코드를 구현할 수 있음

c. 배우기 쉽고 간결함
d. 강력한 커뮤니티, 메타

🌕 리액트의 역사

2000년대 LAMP 스택 유행
- Linux, Apache Web Server, MySQL, PHP를 활용한 웹개발이 주를 이룸
- DB에서 데이터를 불러와 웹 서버에서 HTML 페이지를 만들어 클라이언트에 제공
- 웹 브라우저는 단순히 이 페이지를 다운로드 받고, JS는 폼 처리와 같은 부수적인 역할만 함
2010년대
- 자바스크립트를 편리하게 사용하기 위한 JQuery가 자바스크립트 비공식 표준으로 자리잡게 됨
- 인터넷 익스플로러8의 Local Storage API
- 2011년 공식 표준화 된 웹 소켓, Canvas, SVG, Geolocation(사용자 위치 정보 제공 API)
- ES5가 표준 스펙으로 자리잡음

---

 

🌕 React를 쓰는 이유

a. 선언형 프로그래밍

• 전통적인 방식: DOM을 직접 조작해야 해서 코드가 길고 복잡해짐.
• 리액트: 상태(state)만 바꾸면 → 화면이 자동으로 업데이트됨.

b. 컴포넌트 기반

• UI를 작은 조각(컴포넌트)으로 나눠 재사용 가능.
• 유지보수와 협업에 강함

c.Virtual DOM

• 실제 DOM을 직접 조작하지 않고, 메모리에서 비교 후 바뀐 부분만 업데이트.(성능 최적화)

d. 상태 관리

• useState, useReducer, Context, 외부 라이브러리(Redux, Zustand 등)를 통한 체계적 상태 관리.

e. 풍부한 생태계

• Next.js, React Native, 수많은 라이브러리로 확장 가능.