거북이개발자

0. 설 치 npm install @reduxjs/toolkit 1. CreateAction (1) const ADD="ADD"; const DELETE="DELETE"; const addToDo = text => { return { type: ADD, text }; }; const deleteToDo = id => { return { type: DELETE, id: parseInt(id) }; }; r기존의 위의 코드를 const addToDo=createAction("ADD"); const deleteToDo=createAction("DELETE"); 이렇게 변경할 수 있다. (2) console.log(addToDo(), deleteToDo()); 두 함수를 console.log 해보면 이렇나 값을..

0. 구현 사항 -React와 React-Redux를 이용한 To-Do List 만들 것이다. 1. 전체 코드 (1). Home.js import React, { useState } from 'react' import { connect } from 'react-redux'; import ToDo from '../components/ToDo'; import { actionCreators } from '../store'; function Home({ toDos, addToDo }) { const [text, setText] = useState(""); const onChange = (event) => { setText(event.target.value); } const onSubmit = (event) =>..

0. 구현 사항 -vanilla js와 pure redux를 이용한 To-Do List를 구현한다. 1. 전체 코드 import { createStore } from "redux"; const form=document.querySelector("form"); const input=document.querySelector("input"); const ul=document.querySelector("ul"); const ADD_TODO="ADD_TODO"; const DELETE_TODO="DELETE_TODO"; const addToDo=(text)=>{ return{ type : ADD_TODO, text }; }; const deleteToDo=id=>{ return { type : DELETE_TOD..

0. 구현 사항 위의 사진처럼 버튼을 누르면 숫자가 올라가거나, 내려가는 프로그램을 구현할 것이다. 1. None Redux, Only Vanilla JS const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.getElementById("span"); let count = 0; number.innerText = count; const updateText = () => { number.innerText = count; }; const handleAdd = () => { count = count + 1; updateText(); }; const handle..

0. 배경 위의 사진처럼 각각의 성분을 읽고, 만들고, 지울 수 있는 기능을 Redux를 이용해서 만들 생각이다. 1. create클릭 시 본문 변경 create 우선 onclick을 이용해준다. dispatch를 이용하여 type, mode를 변경해준다. if(state.mode === 'create'){ document.querySelector('#content').innerHTML = ` ` } onsubmit를 통해서 각각의 입력된 값을 dispatch를 통해 store에 저장한다. 2. create값 push, else if(action.type === 'CREATE'){ var newMaxId = state.max_id + 1; var newContents = state.contents.con..

0. 배경 위의 사진처럼 각각의 성분을 읽고, 만들고, 지울 수 있는 기능을 Redux를 이용해서 만들 생각이다. 1.title 목록 만들기 function reducer(state, action){ if(state === undefined){ return { max_id:2, mode:'welcome', selcted_id:2, contents:[ {id:1,title:'HTML',desc:'HTML is ..'}, {id:2,title:'CSS', desc:'CSS is ..'} ] } }} var store = Redux.createStore(reducer); reducer함수를 정의해주고, reducer함수를 인자로 한 store를 만든다. function TOC(){ var state = sto..

0. 배경 위의 사진처럼 각각의 버튼을 누를 시 3개의 색이 변하는 코드를 짜고 싶다. 1. Redux 사용 안 할 시 -부품이 생길 때마다 각각의 부품에 코드가 추가되고 점점 기하급수적으로 늘어난다. 2. Redux 사용 이렇게 Redux을 이용해서 독립적인 코드를 작성이 가능하다. 부품수가 늘어도 앞의 코드처럼 코드 수가 기하급수적으로 늘지 않는다. (1) function reducer(state, action){ if(state === undefined){ return {color : 'yellow'} } if(action.type==='CHANGE_COLOR'){ newState=Object.assign({}, state, {color : action.color}); } return newStat..

1. Redux map -store : 정보가 저장되는 곳. -state : 실제 정보가 저장되는 곳. 그렇지만 직접적으로 접근이 불가능하다. -reducer : store을 만들 시 reducer라는 함수를 공급해줘야 한다. reducer의 return 값은 새로운 state 값이 된다. -render : redux와는 독립적으로 개발자가 짜는 코드 -getState : store에서 값을 렌더에 주는 함수. -subscribe : render을 subscribe에 등록, 그러면 state값이 바뀔 때마다 render함수가 호출되면서 UI가 새롭게 갱신된다. -action : action이 dispatch에 전달된다. -dispatch : reducer를 호출해서 state값을 바꾼다. 그 후 subs..