거북이개발자

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. delete버튼 클릭스 dispatch로 type을 변경해준다. else if(action.type === 'DELETE'){ var newContents = []; var i = 0; while(i < state.contents.length){ if(state.selcted_id !== state.contents[i].id){ newContents.push( state.contents[i] ); } i = i + 1; } newState = Object.assign({},state, { contents:newContents, mode:'welcome' }) } reducer 함수 내의..

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..