redux4 [Redux] Redux 사용법 (완) - 컴포넌트에서 store 호출하기 Redux의 매커니즘slice에서 상태를 관리 store에서 slice를 관리 Provider로 컴포넌트 감싸기 컴포넌트에서 store 호출해서 사용하기 (이번편에서는 이 내용을 다룹니다.)✅ 상태(state) 사용하기useSelector() 를 사용하여 slice의 상태값을 가져올 수 있습니다.useSelector((state) => state.slice이름.상태이름)import { useSelector } from "react-redux";const UserList = () => { // userSlice의 userList 상태값을 가져오기 const userList = useSelector((state) => state.user.userList); return (생략...)};// 이해를 .. Programing/Redux 2024. 4. 26. [Redux] Redux 사용법 (2) - store, provider Redux의 매커니즘slice에서 상태를 관리 store에서 slice를 관리 (이번편에서 다룰 내용)Provider로 컴포넌트 감싸기 (이번편에서 다룰 내용)컴포넌트에서 store 호출해서 사용하기✅ slice를 관리하는 storestore는 slice를 보관하고, 관리하는 저장소입니다.getState(), useSelector() 를 통해 상태를 가져오고dispatch를 통해 액션을 발송하는 역할을 합니다.store 예제import { configureStore } from "@reduxjs/toolkit";import userReducer from "../features/user/userSlice";export default configureStore({ reducer: {userReducer},.. Programing/Redux 2024. 4. 26. [Redux] Redux 사용법 (1) - slice Redux의 매커니즘slice에서 상태를 관리 (이번편에서는 slice를 다룹니다.) store에서 slice를 관리 Provider로 컴포넌트 감싸기 컴포넌트에서 store 호출해서 사용하기✅ 상태를 관리하는 sliceslice는 상태(state)와 상태를 다루는 함수들에 대한 정보가 있는 객체입니다.createSlice() 로 slice를 생성합니다.이 slice는 3가지 필수 속성이 있습니다.name : 슬라이스를 식별하기 위한 이름initialState : 상태의 초기값을 정의하는 객체reducers : 상태를 다루는 함수를 정의하는 객체Slice 예제import { createSlice } from "@reduxjs/toolkit";// 슬라이스 생성export const userSlice = .. Programing/Redux 2024. 4. 25. [Redux] Redux 설치 Quick Start | Redux - How to set up and use Redux Toolkit with React-Redux ko.redux.js.org ⭐ Redux 설치 npm install react-redux npm install @reduxjs/toolkit 각각 Redux와 Redux Toolkit을 설치하는 명령어이다. ⭐ Redux DevTools 설치 개발자도구에서 Redux 데이터를 더 편하게 확인이 가능한 확장 프로그램이다. 아래 사이트에서 "chrome에 추가" 를 눌러 설치한다. Redux DevTools Redux DevTools for debugging application's state changes. chrome.google.com ⚠️ 내가 겪은 에러 설치 할 때.. Programing/Redux 2023. 8. 21. 이전 1 다음
