데이터 상태 관리. 그것을 알려주마를 보며 정리를 한 내용입니다.
상태관리란?
프론트엔드 개발에서 상태관리란 동적으로 표현되는 데이터라고 할 수 있습니다. 자바스크립트가 계속해서 발전을 하며 브라우저(클라이언트) 단에서 렌더링을 하고 서버에서는 REST API 혹은 GraphQL과 같이 브라우저 렌더링에 필요한 데이터만 제공하는 형태로 기술이 변화했습니다.
웹페이지 상에서 체크박스를 클릭하거나 카테고리를 변경하는 경우 웹페이지를 전부 재로딩시키는 것이 아니라 상태에 따라 필요한 부분만 동적으로 렌더링하는 형태로 변해온거죠
상태 관리 패러다임 변화
JQuery => Angular => Redux
JQuery에서의 상태관리
자바스크립트는 다양한 브라우저에서 쉽게 개발하기 위해 나온 언어로 보통 HTML은 레이아웃을 만들고 CSS는 스타일을 입히며, JavaScript를 통해 동작을 씌운다라고 배웁니다.
이러한 자바스크립트를 다양한 브라우저에서 쉽게 개발하기 위해 나온 라이브러리가 바로 제이쿼리입니다.
JQuery의 경우 동작베이스가 되는 DOM에다가 JQuery를 이용해 데이터를 넣는 형태로 상태관리를 해왔습니다. DOM이 베이스가 되어 각각의 element의 상태를 저장한 것이죠.
하지만 이 경우 서로 다른 element의 상태변화를 추적하기가 어려워 하나의 element의 상태가 변화되어버리면 버그가 생겨버리게 되는 일이 비일비재했습니다. 즉 유지보수를 하는데 비용이 크게 든 것이죠.
Angular JS의 상태관리
이후 등장한 Angular JS의 경우 출력할 데이터에 초점을 맞추어 데이터의 값이 변경되면 출력도 자동적으로 수행되는 방식으로 많은 개발자들에게 환영을 받았습니다.
Angular JS 기본적으로 모듈이라는 개념을 사용하며 컨트롤러라는 지시자를 이용해 마크업 상에 영역을 생성하는 방식으로 Angular JS부터 모듈을 이용해 상태관리가 시작되었다고 볼 수도 있습니다.
