[ReactJS] 리액트의 특징 및 원리

 

 

프로그래밍 언어나 프레임워크를 사용할 줄 아는 것보다 그 원리를 아는 것이

더 중요하다는 것을 깨닫는 요즘,

내가 보려고 정리하는 리액트의 특징 및 원리 

---

리액트를 쓰는 이유는 ?

 

java script로 dom을 관리하기 위해서는 id 나 class 값 기준으로 관리하기 때문에

동적인 규칙이 많아지면 복잡해질 것 

따라서 유지보수가 힘들어짐

 

> ember, angularJS - 자바스크립트 특정 값이 바뀌면 dom도 바뀌도록 연결해서 업데이트 방법 간소화

> reactJS - 특정 값만 바꾸는 것이 아니라 새로 페이지를 렌더링함으로 어떻게 업데이트 할 것인지 고민하지 않아도 된다. 하지만 자바 스크립트 객체인 가상 DOM을 사용해 업데이트가 필요한 요소만 변경함

 

---

 

0) SPA(Single Page Application)와 CSR(Client Side Rendering) 기반의 랜더링 

 

- 효율적인 클라이언트 리소스 사용 

- 서버 내 HTML, CSS, JS를 랜더링 하는 것 뿐 아니라 안드로이드와 아이폰 등 다른 플랫폼 서버와 공유할 수 있음 

- SSR도 가능하다

 

 

1) 데이터 변화 시에 가상 DOM을 사용한다. 

 

- 리액트는 데이터의 변화가 있을 경우 DOM에 바로 접근하지 않고

메모리에 저장된 가상 DOM을 리랜더링하여 

변경 전의 가상 DOM과 비교하여 변경된 부분만 동기화 한다. 

 

 

2) 컴포넌트 기반의 화면 구성 

 

- 기능과 역할에 따른 독립적인 관리 가능 

- 코드의 재 사용성이 좋다. 

 

 

3) 리액트는 View만 제공한다

 

리액트는 MVC 프레임워크가 아니다. Model, View, Controller 중에 리액트는 View만 제공한다.

다른 부분은 라이브러리를 사용하기 때문에 프레임워크라고 불리기보단 라이브러리로 불리는 것! 

Flux 구조에 따라 Action -> Dispatcher -> Store의 단방향 데이터 흐름을 사용하며

상태관리를 위해 Redux 라이브러리를 많이 사용한다고 한다. 

 

 

velog.io/@wooder2050/%EB%A6%AC%EC%95%A1%ED%8A%B8React%EB%8A%94-%EC%99%9C-%EC%93%B0%EB%8A%94-%EA%B1%B4%EB%8D%B0

리액트(React)는 왜 쓰는 건데⁉

 

---

Flux 구조

 

Dispatcher : 액션객체가 전달, 등록된 콜백 함수를 실행하여 Store에 데이터를 전달한다. (한 개의 인스턴스)

Store : 애플리케이션의 상태를 저장하는 곳 / javascript의 object 

Action : 변화를 일으키는 특정 묶음  / type 속성값을 가진 자바스크립트 객체

 

 

---

[디자인패턴] Flux, MVC 비교

velog.io/@shin6403/Redux-Redux%EC%95%BC-%EB%84%88%EB%8A%94-%EB%88%84%EA%B5%AC%EB%8B%88Part.1

Redux | Redux야 너는 누구니?(Part.1)