[9주차/카사] 워크북 제출합니다.#95
Conversation
| initialState, | ||
| reducers: { | ||
| // 장바구니 비우기 | ||
| clearCart(state) { |
There was a problem hiding this comment.
카사 코드 중간 중간 설명이 잘 되어 있어서 이 코드가 무슨 코드인지 잘 알 수 있어서 좋아요! 카사 코드는 항상 잘 알아볼 수 있어서 좋은 것 같아요!
qkrdmsthff
left a comment
qkrdmsthff
left a comment
There was a problem hiding this comment.
카사 이번주도 수고 많으셨어요! 그런데 3주차 미션은 수행하지 않은 걸까요? ... 일단 기말고사 시험 화이팅입니다!
| const filteredTasks = state.tasks.filter((task) => { | ||
| if (filter === "all") return true; | ||
| if (filter === "active") return !task.completed; | ||
| return task.completed; | ||
| }); |
There was a problem hiding this comment.
현재 useTaskManager 내부의 filteredTasks 는 컴포넌트가 렌더링될 때마다 매번 state.tasks.filter(...) 를 새롭게 실행합니다!
Todo 리스트의 개수가 적을 때는 문제가 없지만, 데이터가 많아지면 렌더링마다 연산이 무거워질 수 있고, 반환되는 배열의 참조가 매번 달라져서 이 데이터를 props 로 받는 자식 컴포넌트들이 불필요하게 리렌더링될 수 있어요!
제가 생각하기엔 이 코드에 메모이제이션을 적용해 보면 좋을 것 같네용~
| const addTask = (text: string) => { | ||
| dispatch({ type: "ADD_TASK", payload: text }); | ||
| }; | ||
|
|
||
| const toggleTask = (id: number) => { | ||
| dispatch({ type: "TOGGLE_TASK", payload: id }); | ||
| }; | ||
|
|
||
| const deleteTask = (id: number) => { | ||
| dispatch({ type: "DELETE_TASK", payload: id }); | ||
| }; |
There was a problem hiding this comment.
addTask, toggleTask, deleteTask 함수들이 렌더링될 때마다 새로 생성되어 반환되고 있어요!
이 함수들을 <TaskItem onToggle={toggleTask} /> 처럼 자식 컴포넌트의 props로 넘겨줄 경우, 자식 컴포넌트에 React.memo를 걸어두었더라도 매번 새로운 함수로 인식되어 렌더링을 유발할 수 있어요!
이 함수들을 useCallback 으로 감싸주면 성능이 더 좋아질 것 같네요!
3 participants
…rilling 개선
✅ 워크북 체크리스트
✅ 컨벤션 체크리스트
📌 주안점