작심삼일 개발이야기

리덕스를 쓰다 보면 정말 코드가 길어진다...준비해야 할 코드도 많고 RTK로 조금 더 쉽고 깔끔하게 사용해보자아 사실 리덕스 안 쓴 지 오래돼서... 기억도 가물가물하다 내가 이해한 그대로 작성하려하니 틀린 점이 있으면 알려주면 감사하겠습니다. 일단 고 Toolkit 에서 사용할 함수configureStoreconst store = configureStore({ reducer: counter})configureStore 함수가 createStore()를 래핑하고 있기 때문에 createStore과 동일한 기능을 제공한다.reducer함수를 reducer라는 이름으로 전달해야 한다. createSliceexport const todoSlice = createSlice({ name: 'todo', ..

useState와 매우 비슷하다.첫 번째 값은 현재 상태두 번째 값은 업데이트 함수이다.  // 설치 방법npm install immer use-immer 상태값이 객체일 때import { useImmer } from 'use-immer';// 상태값이 객체일 때function App() { const [person, updatePerson] = useImmer({ name: "suhyeok", age: "27" }); const updateName = (name) => { updatePerson(draft => { draft.name = name; }); } const plusAge = () => { updatePerson(draft => { draft.age++; }); }}상태값이..

리액트의 상태관리에서 불변성을 지키라는 말 한번은 꼭 들어봤을 것이다. 왜 불변성을 지켜야하는 지에대해서 공부해 보았다. 리액트에서 불변성이란 기존의 값을 직접 수정하지 않고 새로운 값을 만들어 수정하는 것을 뜻한다. const [numberArray, setNumberArray] = useState([]); const plusArray = (e) => { setNumberArray([...numberArray, e.target.value]); } 배열을 관리하는 set함수를 사용할 때 setNumberArray처럼 기존 numberArray를 직접 수정하지 않고 새로운 배열을 만들어서 수정해준다. 아래의 예시코드로 불변성을 어떻게 지키는지 알아보자 const arrayA = [1,2,3,4,5]; co..