store3 Vue(13) 동적라우팅으로 상세페이지 vuex 로 구현하기 메뉴들을 클릭할 때, 라우터를 통해 각각의 컴포넌트 상세페이지로 넘어가는 것이 아니라 컴포넌트 없이 동적라우팅을 통해 상세 페이지로 넘어가는 기능을 구현해보자. Vue(14) 동적라우팅으로 상세페이지 vuex 로 구현하기 src/api/index.js 일단 Api를 불러와 상세페이지를 보여줄 통신 메소드를 정의해보자. import axios from "axios"; function showMenuDetailApi(menuid) { // 매개변수로 menuId를 받는다. const BASE_URL = `http://________/menu/${menuid}`; return axios.get(BASE_URL); } export { showMenuDetailApi }; src/router/index.js 통신.. 2021. 8. 24. React(31) Redux 패턴 action-reducer-store-view 지난 포스팅에서는 Redux 의 개념을 심플하게 알아보았다. 이번 포스팅에서는 예제를 통해 몸소 느껴보자 React(30) Redux 란 Redux 란 리덕스 는 React 의 상태관리 라이브러리이다. 즉, 데이터를 더욱 쉽게 이쪽저쪽으로 보내주고 관리도 해주는 도우미이다. React 는 View 만을 책임지는 라이브러리이기 때문에 데이터를 어 devbirdfeet.tistory.com React(31) Redux 패턴 action-reducer-store-view Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로.. 2021. 5. 15. React(30) Redux 란 Redux 란 리덕스 는 React 의 상태관리 라이브러리이다. 즉, 데이터를 더욱 쉽게 이쪽저쪽으로 보내주고 관리도 해주는 도우미이다. React 는 View 만을 책임지는 라이브러리이기 때문에 데이터를 어떻게 관리할 것인가 고민을 하다가 redux 가 나왔다. 컴포넌트의 props와 state 만으로 상태를 관리하기엔 우리가 만드는 앱은 너무 복잡하기 때문이다. Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로) 구독하고 있는 → 컴포넌트(View)에 상태변화가 적용된다. 액션 생성자(action creator.. 2021. 5. 14. 이전 1 다음 반응형
