state

React 공식 문서를 통한 학습 중, use-immer에 대해 접하게 되었다. 반복적인 코드를 줄이기 위해 use-state 대신 use-immer를 사용할 수 있다는 내용이었다. 그렇다면, 모든 경우에 use-state 대신 use-immer를 사용할 수 있을까? 결론부터 말하자면, use-state와 use-immer를 적절히 혼용해야한다고 판단했다. 이유를 말하기에 앞서, use-immer에 대해 간단히 설명하겠다. use-immer 란? use-immer는 immer 라이브러리를 리액트의 상태 관리와 결합하는 훅을 제공한다. immer는 불변성을 유지하면서 상태를 업데이트하는 것을 간편하게 만들어 주는 도구이며, 복잡한 상태 구조를 가진 애플리케이션에서 특히 유용하다. use-immer의 장점 ..

State - vuex는 Single State Tree (단일 상태 트리)를 사용 - 중앙에서 관리하는 모든 상태 정보를 state가 관리 (==data) - 여러 컴포넌트 내부에 있는 특정 state를 중앙에서 관리 - 기존에는 state를 찾기 위해 각 컴포넌트를 직접 확인 - vuex를 활용해 vuex store에서 컴포넌트에서 사용하는 state를 한눈에 파악 - Mutations에 정의된 method에 의해 변경 - State가 변경되면 해당 State를 공유하는 모든 컴포넌트의 DOM은 자동으로 렌더링 됨 - 모든 Vue 컴포넌트는 Vuex Store에서 state 정보를 가져와 사용 - 각 컴포넌트는 dispatch()를 사용해 Actions 내부의 method 호출 Actions - 컴포..

vuex Vue.js application에 대한 상태관리패턴 + 라이브러리 application 모든 component들의 중앙 저장소 역할 (데이터 관리) 기존 Vue.js의 문제점 상위(부모) 하위(자식)의 단계가 많이 복잡해 진다면 데이터의 전달하는 부분이 매우 복잡해짐 동위 컴포넌트 또한 종류가 많다면 매우 복잡해짐 => vuex를 사용하게 되면 중앙 저장소가 존재하게 되며 아무대서나 꺼내 사용할 수 있게 된다 모든 vue 프로젝트는 vuex를 써야하는가? -> NO 단순한 구조라면 $emit props을 통해 직접 부모 자식으로 이동하는 것이 편리 상태관리패턴 - 상태는 앱을 작동하는 원본 소스 (= data) - 뷰는 상태의 선언적 매핑 (=template) - 액션은 뷰에서 사용자 입력에 ..