본문 바로가기

노마드코더15

3. Redux Toolkit Redux-Toolkit : Redux를 더 간결하고 편리하게 사용할 수 있는 pakage   -리덕스보다 더 짧은 코드로 짤 수 있음  -state를 mutate(변형)이 가능함. 단 리턴을 해야 함 ex) return store.push() = O>> npm install @reduxjs/toolkit //redux toolkit 설치 redux - ※createSlice : Redux-Toolkit에서 reducer를 생성하는 함수.    -name : 이름    -initialState : 초기값    -reducers : 리듀서 생성import { createSlice } from "@reduxjs/toolkit";const countSlice = createSlice({ //슬라이스 생성 n.. 2024. 5. 14.
2. useDispatch dispatch : reducer에게 메세지(action)를 전달하는 함수 page -   ※useDispatch : react-redux에서 디스패치를 사용할 수 있게 함import React from "react";import { useDispatch, useSelector } from "react-redux";function ReduxCount() { const count = useSelector((state) => state); const dispatch = useDispatch(); //디스패치 const addCount = (e) => { e.preventDefault(); dispatch({ type: "ADD" }); //카운터 증가 }; const minusCount .. 2024. 5. 12.
1. useSelector, Provider 리덕스   -자바스크립트의 state를 관리하는 라이브러리   -React, Angular, Vue.js 등 자바스크립트 어디에서는 사용 가능  -state를 mutate(변형)하지 않고 새로운 object를 리턴해야 한다     ex) store.push() = X           [return [...state, {type : "ADD"}] = O>> npm install react-redux //리액트 리덕스 설치 redux -   ※store : data가 저장되는 state  ※createStore() : store를 생성하는 함수  ※reducer : data를 수정(modify)하는 함수  ※ action : reducer에게 명령을 내리는 매개변수      -type : 명령 이름 지정 .. 2024. 5. 12.
CHROME APP componenet -Input.jsx -Button.jsx -Checkbox.jsx module -Login.jsx -Clock.jsx -Weather.jsx -ToDoList.jsx page -ChromeApp.jsx css -List.css img -1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg App.js component - import React from 'react' function Input({className, type, name, value, onChange, maxLength, placeholder, checked}) { return ( ) } export default Input component - import React from 'react' function But.. 2024. 2. 5.

티스토리툴바