728x90 [프론트엔드]27 [React] Redux store의 state 변경하는 방법 1. store.js 안에 state 수정해주는 함수 만들기 let user = createSlice({ name : 'user', initialState : 'kim', reducers : { changeName(state){ return 'john ' + state } } }) 2. export 하기 export let { changeName } = user.actions 이전 코드에 추가한다. slice이름.actions로 state 변경함수가 전부 그 자리에 출력된다. 3. import 해서 사용하기 import { useDispatch, useSelector } from "react-redux" import { changeName } from "../store" function Cart() { .. 2023. 5. 25. [React] Redux store state 보관 및 사용하기 1. 보관 방법 import { configureStore, createSlice } from '@reduxjs/toolkit'; let user = createSlice({ name: 'user', initialState : 'kim' }) export default configureStore({ reducer:{ 작명: user.reducer } }) 다음과 같이 let으로 변수를 설정 후 export 후에 변수를 불러와준다. reducer:{} 안에 .reducer로 불러와야함 작명에는 user값 그대로 넣어보았다. 2. 사용 방법 import { useSelector } from "react-redux" import { useSelector } from "react-redux" function r.. 2023. 5. 24. [React] Redux 관련 용어 정리 Redux란? 상태 관리 라이브러리로서, React와 함께 사용되어 복잡한 애플리케이션의 상태를 효과적으로 관리하는 데 도움을 줍니다. Redux를 사용하면 상태를 단일 스토어에 저장하고, 상태의 변화를 예측 가능한 방식으로 관리할 수 있습니다. 다음 아래에 Redux 관련 용어들에 대해 정리해 놓았습니다. 액션 (Action) 액션은 반드시 type 필드를 가지고 있어야 하며, 해당 액션이 어떤 종류의 상태 변화를 나타내는지 식별합니다. 액션 생성자 (Action Creator) 액션을 생성하는 함수입니다. 액션 생성자는 Redux 액션을 생성하여 디스패치(dispatch)하는 데 사용됩니다. 리듀서 (Reducer) 현재 상태와 액션을 기반으로 새로운 상태를 반환하는 순수 함수입니다. Redux 스토.. 2023. 4. 15. [React] Redux Toolkit 설치 Redux를 사용하면 Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리 모든 컴포넌트가 props 없이 컴포넌트를 직접 쓸 수 있다. state 변경 관리할 때 쓸 수 있다. Redux 설치 방법 package.json 파일을 열어서 "react", "react-dom" 버전을 확인해서 18.1.0 이상인지 확인 후 터미널에서 npm install @reduxjs/toolkit react-redux 입력 Redux 셋팅 store.js 파일을 만들어서 다음과 같이 넣어준다. import { configureStore } from '@reduxjs/toolkit'; export default configureStore({ reducer:{} }) store.js가 state들을 .. 2023. 4. 11. 이전 1 2 3 4 ··· 7 다음 728x90
