7. 할 일 목록 구현하기 · GitBook
Opened this issue · 10 comments
7. 할 일 목록 구현하기 · GitBook
TodosContainer 컴포넌트의 onToggle 함수에 useCallback 을 사용하는 이유는 무엇인가요? useDispatch 로부터 받는 dispatch 함수가 달라지지 않는 것으로 알고 있는데 의아합니다.
아 아닙니다 질문이 잘못되었네요. useCallback 을 사용하는 이유는 이해했습니다. 다만 dispatch 를 dependency 로 넣어준 이유가 무엇인가요?? useDispatch 로부터 받는 dispatch 함수는 달라지지 않지 않나요?
# @shmoon2917
https://medium.com/@pks2974/redux-hook-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-3b92b4d75466
useDispatch()는 store의 dispatch를 가져올 뿐이므로, 일반적으로는 같은 객체를 가리킬 것 같습니다.
@shmoon2917 dispatch가 없으면 eslint에서 exhaustive-deps가 뜹니다.
onToggle은 useCallback을 사용하는데, onCreate는 왜 useCallback을 사용하지 않나요?
@sdh7700 음... 그건 아마도 교육 자료라서 설명 목적으로 하나에만 적용하신게 아닐까 싶습니다. 지금 테스트 해보니 onCreate()에 useCallback()을 적용해도 정상적으로 작동합니다.
소소하지만 날카로운 질문같습니다! 왜냐면 저는 nextId 때문에 memoize가 어렵지 않을까 생각했거든요. 아무래도 테스팅 없이 리팩토링을 해서 발생하는 불안감 이었나 봅니다.
@sdh7700 onCreate는 Todos에서만 사용되는반면 onToggle 은 리렌더링이 빈번하게 이루어지는 TodoItem 까지 내려가기 때문인 것 같습니다.
modules/todos.js 에서
todo.done 을 초기화하거나 설정하지 않았는데,
style={{ textDecoration: todo.done ? 'line-through' : 'none' }} 에서 어떻게 todo.done을 false로 인식하고 동시에 done을 생성시키나요?
undefined를 false로 인식하고 done을 생성시킨 것 같다고 추정은 됩니다.
그리고 위 말이 맞다는 전제하에, 이렇게 코딩하는게 올바른 방식인가요?
이래도 저래도 프로그램을 돌아간다지만,
addTodo 함수에 애당초 done: false를 넣어줘야하는 것이 아닌가 문의드립니다..
보통 현직자들은 어떻게 짜는지 궁금합니다.
@shmoon2917
저도 궁금해서 알아봤는데 리액트 공홈에서 dispatch는 deps에 포함안시켜도 된답니다.
https://ko.reactjs.org/docs/hooks-reference.html
useCallback을 하나에만 적용시키는 이유는 onCreate는 React Memo가 적용된 하위 컴포넌트로 내려보내지 않기 때문입니다.