KBW's Developer

이번시간은 useSelector 과 useDispatch 로 connect 를 사용하지않고 간단하게 사용하는방법에 대해알아보겠습니다. 그전에 redux 와 react-redux 를 설치합니다. 현재 코드 구조는 는 App 컴포넌트 아래 Left 컴포넌트 와 Right 컴포넌트 의 2개의 자식 컴포넌트가있으며 Left 컴포넌트 아래 left-child Right 컴포넌트 아래 right-child 각각 자식 컴포넌트가 또있는 형태입니다 이해를 돕기위해 아래 그림을 참고해주세요. 1 ) App 컴포넌트에서 reducer 를 생성합니다 2 ) Left 컴포넌트 에 자식 컴포넌트에서 useSelector 를 import 해주고 useSelector 는 함수를 인자로 받기때문에 새로 함수를 만들어서 인자로 넣어주..

이전 시간은 createAction 을 사용하여 반복되는 코드와 전체적인 코드의 양을 줄이기위해 이전 보다는 새로운 방식인 createAction 을 사용하였습니다. 하지만 Switch Case 와 default return 의 코드를 여전히 사용하였는데 , createReducer 를 사용하면 이또한 코드의 양을 최적화 할수있습니다. 다소 복잡하게 느낄수있기에 이전 코드들의 변화를 익히시고 사용하는것이 좋습니다. 모두다 같은 기능을 하기에 어떤 코드를 사용하여도 문제가 되진않지만 다만 더적은양으로 같은기능을 구현하기위해 도전 하길원한다면 사용해보시길.. (주석된 코드가 이전코드이며 그아래는 바뀐 코드입니다) https://redux-toolkit.js.org/api/createreducer create..

react-redux 에 connect 함수를 이용하여 외부 컴포넌트에서 reducer 에 state , dispatch 를 사용하거나 접근할때 중 dispatch 에 대한 내용을 추가적으로 작성해보겠습니다. store.js 파일 (reducer) toDo.js 파일 (외부component) 1) store 파일에 만들어놓은 acrionHandler 에는 state 에 추가하는 addToDo 함수와 , 삭제하는 deleteToDo 함수가 object 형식으로 사용하기위해서 담아두었습니다. ( 각 함수마다 export 해서 사용하여도 됨) 2) toDo.js 파일에 dispatch 를 사용해야하기에 connect 함수를 import 한후 위와같이 argument는 state를 불러올필요 없기에 null 값..

react에서 redux를 사용하려면 우선 터미널에 npm install react-redux를 설치해주자 우선 폴더 구조는 아래와 같다. store 를 다른 컴포넌트에서 사용하려면 약간의 설정이 필요하다 (어렵지 않음) 1) react-redux에서 { Provider }를 import 해온다 2) index.js 에 Provider로 App을 감싸준다 , store에서는 js와 redux를 사용했듯이 작성하면 되며 차이가 있다면 , export를 해주어야 한다. 3) store를 외부에서 사용 가능하게 export default store; 해준다. 그리고 (사용할 컴포넌트) Home.js 에서는 store에 있는 데이터를 사용하기 위해서 4) react-redux에 connect() 함수를 impo..

redux는 지켜야 할 규칙이 있는데. 그중에 이번엔 데이터를 추가하는 올바른 방법에 대하여 알아보겠다. mutate state => No! input 에 텍스트를 입력하게 되면 form에 submit을 통해 onSubmit 함수가 실행된다. input.value를 통해 값을 새 변수에 담은 후 store.dispatch로 action type ADD_TODO 를 보낼 때 payload ( 값을 전달) 를 하게 되는 코드이다. 여기서 reducer 에서 값을 modify(수정) 하기 위해 action.type === ADD_TODO 이곳에 명령을 실행시켜 return 하는데, 자주 듣는 말이 값을 수정할 때는 mutable 하면 안 된다!라는 말을 자주 듣게 된다 이 말의 뜻은 데이터의 원본을 직접적으로..

reducer의 state 값이 변화될 때마다 감지하는 subscribe 함수에 대해 알아보겠습니다. 우리는 어떠한 이벤트가 발생되었을때 data의 값이 변화가 되어야 할 때가 있는데, redux 에서 createStore로 생성한 data 가 담겨있는 곳에 변화가 있을 시 적절한 다음 명령을 실행하게 할수있게 하는 subscribe 함수가 있다. import { createStore } from "redux"; const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.getElementById("number"); const reducer = (count ..

Redux 없는 Vanila JS로 간단한 코드를 살펴보겠습니다. const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.getElementById("number"); let count = 0; number.innerText = count; const updateText = ()=>{ number.innerText = count; } const handleAdd = () => { count++; updateText(); }; const handleMinus = () => { count = count - 1; updateText(); }; add.addEv..