1. 리액트란 무엇인가 ?
SPA(Single Page Application)
- 가상 DOM을 활용하여 부분적인 렌더링을 하는 자바스크립트 라이브러리
- Backend에서는 API만 주로 제공하고,
클라이언트에서 Ajax와 template작업을 통해 동작하는 Rich한 웹애플리케이션.
non-SPA일 때는?
클라이언트에서 url에 맞는 페이지를 서버에 요청하고 서버는 어떤 정보를 보여줘야 하는지 처리를 해서 클라이언트에게 전달해준다.
단점
사용자와 인터렉션이 많은 경우에는 서버의 자원이 많이 사용되고 불필요한 트레픽이 낭비 될 수 있다.
SPA의 장점
- 서버의 자원을 아낄 수 있다.
- 더 좋은 사용자 경험을 누릴 수 있다.
SPA의 단점
-
앱의 규모가 커지면 js 파일의 크기가 너무 커질 수 있다.
=> 해결책 : Code Splitting (각 기능별로 파일을 분리시켜 필요한 파일만 불러올 수 있다.) -
브라우저에서 자바스크립트가 구동 되지 않으면 UI를 볼 수 없다
예) 검색엔진에서 크롤링 불가능
=> 해결책 : Server Side Rendering
2. 리액트의 특징
(1) 화면 view단을 구현하기 위한 최소단위로 재사용가능한 component를 사용
(2) component를 조립하여 완성된 view를 만듬
(3) 단방향 데이터 바인딩 ( 부모->자식으로서의 데이터흐름)
(4) 거대함을 벗어나 view 작업에 좀더 집중
(5) view rendering의 동작과 성능은 개발자가 신경쓰게하지 말기.
(6) DOM조작을 위해 template을 별도 분리하지 말고, UI컴포넌트 단위로 그 안에서 표현.
(7) Tree구조의 Virtual DOM을 계속 만들면서 이를 계속 비교하면서 변경사항을 파악.
(8) 변경이 일어난 부분만 수정하며 DOM변경 최소화를 통해 성능 보장.
3. 리액트의 장점
(1) component를 사용해서 유지보수가 용이 (필요한 부분의 component만 렌더링 된다. 최적화된 렌더링이 가능)
(2) 생태계가 넓고, 다양한 라이브러리 사용 가능
(3) virtual DOM을 활용하여 빠른 렌더링이 가능
(4) 단방향 데이터 바인딩을 통한 디버깅 용이, 다른 라이브러리에 비해 안정성이 높음
(5) 리액트 네이티브를 활용하여 앱 개발 가능
