코딩왕랄프👊🏻

이번 시간에는 Redux를 통해 저장한 값을 불러오는 방법을 알아보겠습니다. 1. 해당 컴포넌트에 필요한 기능을 import 합니다. import { useDispatch } from 'react-redux'; import { setPropertyType } from '../store/slices/propertyTypeSlice'; 2. dispatch를 가져옵니다. const dispatch = useDispatch(); 3. dispatch 함수를 통해 값을 저장합니다. dispatch(setPropertyType(value));

이번 시간에는 Redux를 통해 저장한 값을 불러오는 방법을 알아보겠습니다. 1. 해당 컴포넌트에 필요한 기능을 import 합니다. import { useSelector } from 'react-redux'; import { setPropertyType } from '../store/slices/propertyTypeSlice'; 2. useSelector를 사용하여 리듀서의 상태를 가져와 저장합니다. const propertyType = useSelector(state => state.propertyType); 3. 마지막으로 저장한 변수를 화면에 보여주면 끝입니다.

이번에는 redux 와 redux-toolkit 을 사용하는 방법을 알아보겠습니다. 1. 리덕스 및 리덕스 툴킷 설치 npm install @reduxjs/toolkit react-redux 2. 리덕스 경로 설정 /store 폴더 생성 /store 내 /slices 폴더 생성 3. 리듀서 생성 slices 폴더 내 propertyTypeSlice 생성 import { createSlice } from '@reduxjs/toolkit'; const initialState = ''; export const propertyTypeSlice = createSlice({ name: 'propertyType', initialState, reducers: { setPropertyType(state, action) ..

Redux란 ? Redux 는 React에서 주로 사용하는 상태 관리 라이브러리 입니다. Redux 를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있습니다. 다음은 Redux에서 주로 접하게 되는 키워드 들에 대해 알아보겠습니다. Action 액션 상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다. 이는, 하나의 객체로 표현되는데 액션 객체는 다음과 같은 형식으로 이뤄져있습니다. 액션은 type 필드는 필수로 가지고 있어야 하고, 그 외에는 자유롭게 넣을 수 있습니다. { type: "CHANGE_INPUT", text: "안녕하세요" } { type: "ADD_TODO", data: { ..