목록Frontend/Redux (4)
JiSoo's Devlog
Redux Toolkit간단하게 말하면 많은 지름길들이 있는 Package라고 보면 된다적은 양의 Redux 코드로 같은 기능을 하도록 도와주는 것 ! npm install @reduxjs/toolkitoryarn add @reduxjs/toolkit createActionconst ADD = "ADD";const DELETE = "DELETE";const addToDo = text => { return { type: ADD, text };};const deleteToDo = id => { return { type: DELETE, id: parseInt(id) };};↓ ↓ ↓ ↓const addToDo = createAction("ADD");const deleteToDo ..
react-router-dom 버전 6부터라면Route를 Routes로 감싸줘야 한다Router > Routes > Route component 속성이 없어졌다대신 element 속성 사용 } /> } /> store은 변경사항을 우리에게 알려줬었다어떤 변화가 일어났을 우리 애플리케이션을 다시 render 하고 싶다면 ProviderReact Redux에는 Provider 컴포넌트를 통해 다른 컴포넌트에서 Redux store를 사용할 수 있다const root = ReactDOM.createRoot(document.getElementById("root"));root.render( );index에 연결 connectconnect는 컴포넌트들을 store에 연결시켜 준..
Vanilla JS로 ToDoList 만들기 To Dos Add const form = document.querySelector("form");const input = document.querySelector("input");const ul = document.querySelector("ul");const createToDo = (toDo) => { const li = document.createElement("li"); li.innerText = toDo; ul.appendChild(li);};const onSubmit = (e) => { e.preventDefault(); const toDo = input.value; input.value = ""; createTo..
ReduxRedux는 기본적으로 JavaScript Application들의 상태를 관리하는 방법Redux가 React와 많이 사용하면서 유명해졌지만 React에 의존하는 라이브러리는 아니다!!Angular, Vue.js, Vanilla JS에서도 모두 쓸 수 있다 Redux 설치npm install reduxoryarn add redux Vanilla JS로 카운터 만들기const add = document.getElementById("add");const minus = document.getElementById("minus");const number = document.querySelector("span");let count = 0;number.innerText = count;const update..