🧐 리액트와 리덕스가 주는 이득은 무엇일까? 무슨 문제점들을 해결해 주는걸까?
가장 문제를 많이 일으키는 녀석.........
바로 돔!!!
돔 API 란???
HTML 문서를 브라우저가 렌더링 하기 위해서 그리고 그 안의 많은 것들을 작동 시키기 위해서 가공 시켜놓은 객체
돔 API는 중요하다!
자바스크립트를 이용해서 웹 앱 UI를 핸들링 할 수 있는 유일한 방법이 바로 DOM API를 이용하는 방법이다.
=> 모든 웹 앱이 DOM API를 사용한다.
돔 API는 까다롭다ㅜ
엄청나게 많은 기능을 제공해주고, 많은 것들을 하게 해주지만,
웹 에플리케이션을 만드는데 최적화된 상태로 되어있지는 않다
애초에 목적이 웹 에플리케이션을 만드는 목적이 아니였다.
기존 웹사이트
HTML은 문서이다. link를 통해서 또다른 HTML 문서로 이동하면, 기존 HTML문서는 사라지고 새로운 HTML문서를 불러온다.
그 과정에서 화면이 깜박인다.
=> 사용성이 떨어진다.
SPA의 등장
화면도 많아지고, 관리해야할 UI도 많아지고 점점 규모가 커지면서 기존 DOM API를 가지고 UI를 만들면 굉장히 문제를 많이 일으킬 수 있다.
기존 DOM API의 문제
- 일관되지 않다.버그 발생
- Cross 브라우징 이슈 ( 브라우저마다 지원하는 API가 다 다름)
- 복잡하다.....
예시
h1태그를 만들어서 getElementbyTagName으로 가져오게되면 HTMLCollection으로 가져와서 그때그때 추가 삭제가 반영이 되지만,
querySelectorAll로 가져오게 되면 NodeList로 가져오며 그때그떄 변경이 적용되지않는다.
=> DOM API를 사용함에 있어서 일관적이지 않다.
기존 DOM API 복잡함에 대한 해결책?
MVC 패턴
MVVM 패턴
=> 직접적으로 해결해 주지는 못했다.
기존 DOM API 복잡함에 대한 해결책!
기존 DOM을 쓰지말자!!! => '리액트'
잠실사는 주니어 개발자