003 Redux 공부 : To-do List

일단 할 일 목록을 만들기 전에 count랑 같은 레포에 넣을 것이기 때문에,

counter를 누르면 counter가 나오고 todolist를 누르면 ToDoList가 나오도록 UI를 바꿔줬다.

👊 Todo-List 만들기

1. 액션 타입, 액션 생성자 함수, 리듀서 설정

src/modules/todo.js

 

2. 루트 리듀서 만들기

한 프로젝트에 여러 개의 리듀서가 있을 때 한 리듀서로 합쳐서 사용한다. 이를 루트 리듀서라고 부른다.

나는 counter와 todos 두 개의 리듀서가 있다. 고로 합쳐야 한다.

리듀서를 합치는 것은 리덕스 내장 함수인 combineReducers를 사용한다.

 

👉🏻 'modules' 폴더에 index.js 파일을 생성한다.

src/modules/index.js

 

👉🏻 'src' 폴더에 있는 index.js 파일에 store를  counter 대신 rootReducer를 넣어준다.

 

👉🏻 여기서 src/comtainers/CounterContainer.js 파일도 고쳐줘야 함 하나일 때는 주석처리한 것처럼 해야 작동함

👉🏻 두 개 일때는 state안에 있는 counter를 가지고 오는 것이기 때문에 state.counter.number 같이 써야 나옴 

 

👉🏻 Selector unknown returned a different result when called with the same parameters. This can lead to unnecessary rerenders. 이런 오류가 뜨고 카운트 숫자가 안 떠서 뭐지??? 했는데

 

👉🏻 useSelector 안의 값을 고쳐주니까 잘 나옴.

 

3. 프레젠테이셔널 컴포넌트 만들기

 👉🏻 'src' 폴더 안에 있는 'components' 폴더에 'Todos.js' , 'TodoItem.js', 'TodoList.js' 파일을 생성한다.

src/components/TodoItem.js

 

<TodoItem.js>

 👉🏻 TodoItem 생성 TodoItem 생성 시 삭제 버튼도 같이 생성

 

👉🏻 React.memo는 컴포넌트 최적화를 위해 사용

React.memo
고차 컴포넌트, 컴포넌트를 React.memo()로 감싸주면 리액트는 컴포넌트를 렌더링 하고 결과를 메모이징한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, 리액트는 컴포넌트를 다시 렌더링 하지 않고 메모이징된 내용을 재사용한다. React.memo는 오직 성능 최적화를 위하여 사용. 렌더링 방지를 위해 사용하면 버그가 발생할 수 있다.

 

 

<TodoList.js>

👉🏻 TodoItem들을 모아 놓은 TodoList 생성 todos를 map으로 돌면서 하나씩 나열

 

 

<Todos.js>

👉🏻 Todo 입력하는 폼과 TodoList를 모아놓은 전체적인 컴포넌트 생성

👉🏻 useState로 todo 등록한 후 input에 텍스트 초기화해 줌

 

4. 컨테이너 컴포넌트 만들기

👉🏻 'src' 폴더 안에 'containers' 폴더에 TodosContainer.js 파일 생성

src/containers/TodoContainer.js

 

👉🏻 useCallback도 렌더링 최적화를 위해서 사용

useCallback을 쓰는 이유

리액트의 useCallback, 언제 써야할까

 

 

 

잘 작동한다. 다음 글은 useSelector 최적화와 connect 함수에 대해서 공부한 것을 작성할 것인데...

일단 TodoList UI부터 바꿔야겠다. 
오늘 import 부분에서 시간도 많이 쓰고, 머리도 데굴데굴 굴리느라 너무 피곤...

 

import addTodo, { deleteTodo, toggleTodo } from "../modules/todos";

왜 이렇게 import 되어있는지는 모르겠지만 이것 때문에 type 오류가 계속 발생해서.....

Cannot read properties of undefined (reading 'type') TypeError: Cannot read properties of undefined (reading 'type')
진짜 생각도 못했던..... 고치고 나서 현타 왔다.

import { addTodo, deleteTodo, toggleTodo } from "../modules/todos";

 

---

 

이전글

2023.09.01 - [React] - 001 Redux의 개념

2023.09.11 - [React] - 002 Redux 공부 : Counter

 

참고

 

React 최상위 API – React

 

리액트의 useCallback, 언제 써야할까

 

7. 할 일 목록 구현하기 · GitBook