Coding/Redux11 Redux - immutable - Next tutorial(마무리)(수정본) Redux - immutable - Next tutorial(마무리) 글에서 수정할 부분이 많아서 새로운 글에 다시 작성하기로 했다. 기존코드에서 수정한 부분(2/6 기준으로 수정할 부분에서 추가로 수정) 1) useStore를 잘못 사용 2) del 기능 구현을 위해서 splice 대신 immutable 메소드 사용 todoList를 만들면서 삭제기능을 넣었다. 삭제 기능을 넣으면서 useStore를 사용해서 redux store에 접근을 했다. 이렇게 코드를 구현했더니 del 버튼을 누르면 바로바로 삭제가 되지 않았다. 그래서 re-render가 될 수 있도록 useEffect를 사용해서 list 값이 변하면 re render가 되도록 코드 구현을 하였으나 그래도 바로바로 삭제가 되지 않았다. use.. 2021. 2. 7. Redux - immutable - Next tutorial(마무리) counter number 에 이어서 todolist를 만들었다. immutable을 쓰면서 데이터를 가공하는데 하루라는 시간이 흘렀다. 잘했는지 모르겠지만, 기능구현에는 이상이 없다. 폴더 구조는 다음과 같이 구성을 했다. containers에서 페이지별로 나눠서 따로 저장을 했다. 우선 redux 상태관리 순으로 시작을 했다. todolist에 쓰고 지우는 기능만 추가를 했다. 그래서 ADD와 DEL을 type에 추가를 했다. todolistAction.js 파일을 만들고 추가와 삭제 action 함수를 만들었다. 삭제를 할 때는 삭제한 data의 위치를 알 수 있는 값을 알고있어야 삭제가 되기 때문에 인자로 index값을 받아왔다. action과 reducer를 연결 시켜주는 dispatch를 만들.. 2021. 1. 3. Redux - immutable - Next tutorial(3) immutable.js에 대해 설명을 하면... List는 배열을 만드는 메소드이다. 이걸로 console로 찍어보면 실제로 Javascript에서 알고 있던 [1, 2, 3, 4]가 나오는것이 아니라 List 메소드에 대해서 나온다. 그래서 toJS()로 변환을 시켜줘야 한다. toJS()는 Javascript 자연적인 형태로 변환 시켜준다. 그래서 하단에 있는 사진을 보면 toJS()를 해준 것은 기존에 사용하던 배열을 볼 수 있다. 그래서 보통 React나 Redux에서 불변성을 지키기 위해서 push, shift 같은 메소드를 mutable한 메소드를 사용하지 말라고 하지만 immutable.js를 이용해서 사용이 가능하다. immutable.js를 조금 더 쉽게 설명하면 객체를 새로운 객체로 만.. 2021. 1. 2. Redux - immutable - Next tutorial(2) 기본적으로 Next를 활용하여 page를 구성하고 분기하였고, 중앙집권체제를 구성하려고 한다. Redux는 단방향흐름을 가지고 있기 때문에 순서대로 진행한다. actions 디렉토리, reducers 디렉토리, store 디렉토리를 구성하였다. actionType을 따로 빼놓은 이유는 변수로 활용하기 위함이고, 나중에 오타 실수를 줄일 수 있기에 따로 파일로 빼서 지정하였다. counter 기능은 증가 감소 대한 이벤트만 있을 것이기에 증가 감소 action type을 지정했다. 그리고 나서 action 함수를 작성했다. 증가일때 action으로 onIncremet를 감소일때 onDecrement 함수를 작성하여 export로 내보냈다. 그리고 나서 action을 받아 줄 dispatch가 필요하므로 r.. 2021. 1. 1. 이전 1 2 3 다음 반응형
