React.js18 Redux Toolkit redux-persist redux-persist: 상태를 지속시키고 싶을 때 사용 프로젝트 구조 src/app/store.js: 스토어 생성 및 루트 리듀서 설정 import { configureStore } from '@reduxjs/toolkit'; import rootReducer from './rootReducer'; // 루트 리듀서를 가져옴 import { persistStore } from 'redux-persist'; import persistConfig from './persistConfig'; // 퍼시스터 설정을 가져옴 const store = configureStore({ reducer: rootReducer, }); export const persistor = persistStore(store); exp.. 2023. 8. 18. state vs props 데이터 조각 1. 원래 제품 목록 2. 사용자가 입력한 검색 텍스트 3. 체크박스의 값 4. 필터링된 제품 목록 이 중 상태는? props 시간이 지나도 변함이 없는 것 -> props 소품을 통해 부모로부터 전달 -> props 구성 요소의 기존 상태 또는 소품을 기반으로 계산 -> props 제품의 원래 목록 -> props로 전달되므로 상태가 아님 검색 텍스트 -> 시간이 지남에 따라 변경되고 어떤 것에서도 계산할 수 없기 때문에 상태 확인란의 값 -> 시간이 지남에 따라 변경되고 어떤 것에서도 계산할 수 없기 때문에 상태 필터링된 제품 목록 -> 원래 제품 목록을 가져와서 검색 텍스트 및 확인란의 값에 따라 필터링하여 계산할 수 있기 때문에 상태가 아님 2023. 8. 6. Redux Redux의 구성요소 - Provider - action(action type, action payload) - action Creator: action 객체를 반환하는 함수 - Dispatch: action을 reducer에게 전달 - Reducer: action이 새로운 state를 반환 - Store: 관리하려는 state를 저장하는 곳 Provider - 모든 컴포넌트들이 store를 사용할 수 있게 최상위 컴포넌트에서 Provider로 감쌈 ReactDOM.render( , document.getElementById('root') ); UseDispatch와 useSelector - 리덕스를 함수형 컴포넌트에서 사용하기 위한 방법 useSelector - store로부터 state를 가져올 때 .. 2023. 7. 27. React Router v6 - useSearchParams useSearchParams Hook import { useSearchParams } from 'react-router-dom'; const About = () => { const [searchParams, setSearchParams] = useSearchParams(); const detail = searchParams.get('detail'); const mode = searchParams.get('mode'); const onToggleDetail = () => { setSearchParams({ mode, detail: detail === 'true' ? false : true }); }; const onIncreaseMode = () => { const nextMode = mode === nu.. 2023. 7. 26. 이전 1 2 3 4 5 다음
