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

redux 를 사용하려면 기본적으로 reducer 를 만들고 type을 지정해주는데, 확실히 redux 의 장점도 많지만 단점이라면 코드의 양을 지적하는 사용자들의 불만을 빼놓을수없다. 코드의 양을 최적화 하기위해 redux 에서 보안하기위해 추천하는 createAction 에 대하여 알아보겠다. createAction 을 사용하기전과 사용후의 코드 변화를 살펴보겠다. (주석처리 한 부분이 이전 코드) 같은기능을 하는데 반복적인 코드를 줄이고 전체적인 코드의 양이 확줄게 된 것을 확인 할수있다 reducer 도 아래와같이 바꿔준다. 바로 위 코드를 보면 switch case 문에 ADD type 부분과 dispatch로 넘어온 action.text 가 createAction 을 통해 만들어준 addToD..

이번시가은 mapStateToProps 에 2번째 파라미터 ownProps 와 React Hooks 에 usuParams( ) 를 알아보겠습니다. ToDo 파일에 li 태그안에 text 를 클릭시 Link 에 지정해놓은 경로, Detail 컴포넌트로 이동이됩니다. Detail 컴포넌트 url 에는 id 값이 묻어서 같이 넘어오는데, 1) useParams( ) 를 이용하면 이렇게 id값을 얻어낼수있습니다. 2) mapStateToProps( state , ownProps) 중 두번째 파라미터 ownProps 를 이용해도 id값을 쉽게 얻을수있습니다. 콘솔에 ownProps 를 찍어보면 아래와 같은 정보를 얻을수있습니다. 그중 match 에 params 를 보시면 id가있습니다. 다시 console.log..

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로 state를 관리하면서 원하는 값을 삭제하는 방법 중 개인적으로 가장 쉽게 느껴진 방법을 소개하겠습니다. 아래는 실제 작성된 코드입니다 html 파일에 body 부분 js 파일 paintToDos 함수 내에서 store에 들어있는 state를 새 변수에 (toDos)에 담은 후 저는 toDos에 map을 사용하였고, ( forEach 반복문을 사용해도 무관합니다 여기서 el 은 toDos array에 각각의 데이터입니다 ) html button을 생성하고 생성된 button에 클릭이벤트를 만들어주고 , anymouse function으로 dispatch 하는데 이때 { type : DELETE_TODO , id : el.id } 데이터를 함께 에 보냅니다 el.id 는 각각의 데이터가 생성될..

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