kasumil의 코딩 공작소

https://redux-toolkit.js.org/ Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org https://soyoung210.github.io/redux-toolkit/tutorials/basic-tutorial/ Redux Toolkit # 기본 튜토리얼: Redux Toolkit 소개 soyoung210.github.io 위 두개는 거진 리덕스 툴킷을 정리한 내용이다. 하지만 내용이 너무 복잡하고, 이것 썼다 저것썼다해서 헤깔린다. 이미 이해를 하고나서 내용을 정리하고자 공식문서 링크를 찾던 도중..

리덕스 툴킷을 다시 배우려고 정리 좀 했다. useSelector = 리덕스 라이브러리 내장된 함수로 리듀서에 있는 state값을 불러오는 함수. useDispatch = 리덕스 라이브러리 내장된 함수로 리듀서 값을 변경시키는 명령 함수. 왜 리덕스가 어렵냐 하면 보일러 플레이트가 많은 상태에서 실질적으로 용어가 많은데, 쓰임을 모르겠으니 헤매는 것. action은 payload를 가지고 있는데, 가르칠때 action도 같이 가르치니 이해가 안된상태에서 헤매게 되는 것. 쉽게 말하면 dispatch 사용하는 것을 action인데, 이를 다른 것처럼 설명하니 헤매게 되는 것이다. dispatch = action이라고 이해하면 편하다. 최상단 index.js import React from 'react'; ..

useCallback, useMemo 둘다 사용방식은 동일합니다. const onInsert = useCallback(() => { const nextList = list.concat(parseInt(number)); setList(nextList); setNumber(“); }, [number, list]) useEffect의 의존성 배열 마냥 [] 대괄호 안에 있는 것이 변화가 있을때 작동하게 만듭니다. 둘다 성능의 최적화에 사용되는 함수인데, useMemo 함수내부의 연산을 주로 최적화 하는데, 사용된다. useCallback은 이벤트 함수를 필요할때만 만들게 만듭니다. 'useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에..

해당 코드는 '도서 "리액트를 다루는 기술"에 저술된 코드입니다.' import React, { useReducer } from "react"; const initialState = () => { counter: 1 }; function reducer(state = initialState, action) { // action.type에 따라 다른 작업 수행 switch (action.type) { case "INCREMENT": return { value: state.value + 1 }; case "DECREMENT": return { value: state.value - 1 }; default: return state; } } useReducer 리덕스를 이해하기 위해서 useReducer를 이해해야..

- 오늘 학습한 내용. github.com/kasumil/Redux_tutorial kasumil/Redux_tutorial Contribute to kasumil/Redux_tutorial development by creating an account on GitHub. github.com 리덕스 튜토리얼 인덱스.js는 두번 만든다. 하나는 실질적으로 1번은 index.js이고, 다른 하나는 2번이 루트 리듀서의 역할을 한다. 후자는 ducks타입으로 해당 액션(modules) 폴더에 포함되어있다. 이름만 index.js이고 rootreducer로 설정한다. 실제로는 rootreducer로 해도 된다. 프레젠테이션 컴포넌트(components)는 단순 ui만 표시한다. 해당 컴포넌트에 useState를..

- 오늘 해야할 일 리덕스 학습. - 평가 및 후기 예전 위코드 다닐때 학습을 하긴했는데, 솔직히 잘 적용한다고 할 수 없어서 이제 다시 복습하고 있다. 역시 복습하기 시작하니까 이해하는 건 뭐지 싶기도하고, 다시 보니 기존에 이해할 수 없는 것들을 제대로 이해하기 시작하였다는 것. 솔직히 이것만 보면 된다. 기존에 리액트 리덕스는 해당 내용이 바뀌면 render함수가 다시 render를 작동하게 할 수 있었다. 그런데, 리액트는 해당 한페이지에서 작동되는 것이 아니라 여러모로 찢어놓게 작동한다. 해당 컴포넌트에서 생기는 값들을 통제하는데 있어서, 해당 컴포넌트에서 동작은 자유롭다. 하지만, 다른 곳에서 해당 값을 보내기는 어렵다. 해당 컴포넌트에서 생기는 값을 반대편으로 보내기 위해서 엄청나게 고생을 ..