Vuex - state, getter, mutations, actions 역할 사용법

안녕하세요. 지난 포스팅에서 Vuex가 무엇인지 언제 사용하는지에 대해서 알아보았습니다. Vuex 상태 관리 라이브러리 설치 방법 사용법 Vuex란? Vuex는 전역 상태(global state)를 관리하는 라이브러리입니다. 지역상태 vs 전역상태 상태는 Local State와 Global State가 있습니다. 지역 상태(local state) 전역 상태(global state) 하나의 컴포넌트에서 powerku.tistory.com 이번에는 Vuex를 더 나은 방법으로 사용하기 위해서 state, getter, mutations, actions에 대해서 알아보도록 하겠습니다. State, Getter, Mutations, Actions를 사용해야 하는 이유 methods: { addOne() { th..

• format_list_bulleted Develop/Vue
• · 2023. 6. 21.
• textsms

React - useState vs useReducer state 관리 Hooks 비교

리액트에서 상태 관리할 수 있는 훅이 useState, useReducer 두가지가 있습니다. 각각의 훅을 언제 사용하면 좋을까요? 프로그래밍에는 맞고 틀림이 없습니다. 아래 내용을 참고하여 상황에 맞게 적절할게 사용하시면 됩니다. useState vs useReducer 비교 useState useReducer 리액트 메인 상태관리 방법 더욱 강력한 상태 관리 방법 개별 및 간단한 상태 관리할 때 사용 각각의 상태나 데이들이 연관되어 있을때 상태 변경이 쉽거나, 업데이트가 몇 개일 때 사용 상태 변경이 복잡할때 useReducer로 처리 가능한 것이 useState로 처리 가능합니다. 정답은 없으니 본인에게 필요한 훅을 잘 사용하시길 바랍니다.

• format_list_bulleted Develop/React
• · 2023. 4. 7.
• textsms

React - useState를 이용하여 카운터 만들기

리액트 state에 대하여 알아보려고 합니다. 리액트 컴포넌트를 생성하고 난 뒤에는 state 값이 변경되면 다시 렌더링 됩니다. 상태가 변경되면 자동으로 다시 컴포넌트를 렌더링 되기 때문에 상태 변경만 해주면 됩니다. 1. useState 초기화 const [counter, setCounter] = React.useState(0); 먼저 useState 함수를 이용하여서 초기화를 합니다. useState 안에 들어간 0은 초기화할 때 사용하는 값입니다. 2. 각 버튼 클릭 이벤트에서 setCounter를 이용하여 상태 값을 변경합니다. setCounter 파라미터를 callback 함수로 작성하였는데, 이전의 counter를 가지고 와서 1을 더해주는 방식입니다. setCounter(counter =>..

• format_list_bulleted Develop/React
• · 2023. 1. 13.
• textsms