neeon의 TIL, 2. React Architecture

728x90

Model(데이터) - View(화면) - Controller (컨트롤러)

* Ajax 로 부터 받는 데이터 - Model

* HTML 과 CSS 로 만들어지는 화면 - View

* javascript가 데이터를 받아 조작하여 서버에 전달 - Conroller

Ajax를 통해 서버에서 HTML을 만들지 않고 데이터만 교환이 가능하게 되었고, JS로 DOM을 조작하는 작업이 중요함에 따라 jQuery를 통해 Ajax와 DOM을 다루게 되었는데...

Model(데이터) - View(화면) - ViewModel(데이터를 화면에 보여지는 값으로 변경)

리액트의 특징 중 하나였던 선언형 프로그래밍과 연관됨.

* . 프론트엔드 아키텍처 변화 정리

프론트엔드는 아래의 순서대로 진화해 왔다...

1) 데이터를 화면으로 변경하는 작업을 자동화하는 방향

=> MVC, MVVM

2) 페이지 단위에서 컴포넌트 단위로 작업 방식이 진화

=> Component

3) 컴포넌트의 재사용성과 독립성이 중요해지면서 컴포넌트를 분류

=> Container-Presenter Pattern

4) 컴포넌트의 계층 구조가 복잡해지면서 데이터교환이 복잡해 지자 단방향 아키텍처 제기

=> FLUX

5) 데이터의 변화를 다루는 상태관리가 컴포넌트 프레임워크와 분리

=> Redux

6) 상태관리가 고도화되고 코드가 복잡해지면서 조금 더 간결하게 데이터의 변경감지를 전달할 수 있는 형태로 발전

=> Hooks와 Context, Recoil, Zustand, jotai

7) 전역적인 데이터 스토어 방향과 서버 상태를 조금 더 편하게 다룰 수 있는 방향으로 발전

=> React Query, SWR, Redux Query

728x90

2. React Architecture