[14기 이하은] step2 상태 관리로 메뉴 관리하기 #287
Conversation
Leehaeun0
force-pushed
the
Leehaeun0-step2
branch
from
7ef5dbc to
6b7834d
Compare
| if (!name) return; | ||
|
|
||
| const menuId = getMenuId(target); | ||
| menuList = menuList.map((menu, index) => index === menuId ? {...menu, name} : menu); |
| const selectedCategory = target.dataset.categoryName; | ||
| category = selectedCategory; |
There was a problem hiding this comment.
| const selectedCategory = target.dataset.categoryName; | |
| category = selectedCategory; | |
| category = target.dataset.categoryName; |
이렇게 선언하지 않은건 selectedCategory 라는 변수 이름을 강조하고 싶으셨던건지 궁금해요~!
| @@ -0,0 +1,18 @@ | |||
| export default class LocalStorage { | |||
There was a problem hiding this comment.
저는 단순히 util함수로 만들어서 로컬스토리지를 관리했는데 이 방법도 좋은것 같아요!👍
|
|
||
| // states | ||
| // [{name: string; category: string; isSoldOut: boolean;}] | ||
| let menuList = MenuListStorage.get() ?? []; |
There was a problem hiding this comment.
?? 라는게 있었네요! 저는 || 를 쓰는데 앞으로는 ??를 써야겠어요! 감사합니다~!😀
| let name = $id('menu-name').value?.trim(); | ||
| if (!name) return; | ||
|
|
||
| menuList = [...menuList, {name, category}]; |
There was a problem hiding this comment.
여기서
{name, category} 값만을 추가해주는 건
처음 생성한 메뉴의 default 상태가 품절이지 않고,
undefined 값일 경우 falsy 처리되기 때문일까요?
| .map((menu, index) => { | ||
| return ` | ||
| <li data-menu-id="${index}" class="menu-list-item d-flex items-center py-2"> | ||
| <span class="w-100 pl-2 menu-name${menu.isSoldOut ? ' sold-out' : ''}">${menu.name}</span> |
There was a problem hiding this comment.
"sold-out" class 앞의 공백을 삼항연산자 안이 아니라
템플릿 리터럴 안에 넣으면 조금더 가독성에 좋을 것 같아요!
| <span class="w-100 pl-2 menu-name${menu.isSoldOut ? ' sold-out' : ''}">${menu.name}</span> | |
| <span class="w-100 pl-2 menu-name ${menu.isSoldOut ? 'sold-out' : ''}">${menu.name}</span> |
| @@ -0,0 +1,18 @@ | |||
| export default class LocalStorage { | |||
There was a problem hiding this comment.
저는 단순히 util함수로 만들어서 로컬스토리지를 관리했는데 이 방법도 좋은것 같아요!👍
| @@ -0,0 +1,3 @@ | |||
| export const $ = (selector) => document.querySelector(selector); | |||
|
|
|||
| export const $id = (id) => document.getElementById(id); | |||
There was a problem hiding this comment.
$(#id)나, $(.class) 로 위의 선언하신 두가지 유틸함수를 사용할 수 있을것 같습니다!
혹시 두가지를 나누신 이유는 성능상의 차이를 구분하기 위해서 나누신 걸까요?
| if (!window.confirm('정말 삭제하시겠습니까?')) return; | ||
|
|
||
| const menuId = getMenuId(target); | ||
| menuList = menuList.filter((_, index) => index !== menuId); |
There was a problem hiding this comment.
menuList를 변경하고, 로컬스토리지에 저장하는 작업이 반복적으로 사용이 되고있는데요, 함수로 따로 관리한다면 더 좋을것 같아요!
| const toggleIsSoldOut = ({target}) => { | ||
| const menuId = getMenuId(target); | ||
| menuList = menuList.map((menu, index) => | ||
| index === menuId ? {...menu, isSoldOut: !menu.isSoldOut} : menu, |
There was a problem hiding this comment.
editMenu(), removeMemu(), toggleIsSoldOut() 이 함수들에서
menuList를 변경하는부분에서 category를 확인하는 부분이 빠져있는데요.
이렇게되면 각 카테고리별로 중복된 이름의 메뉴가 존재한다면 해당 함수의 작업들이 사용자가 원하는 카테고리의 메뉴가 아니라
menuList에서 index가 가장 빠른 메뉴가 수정, 삭제, 품절이되는 버그가 발생할수 있을것 같아요!
🎯 step2 요구사항 - 상태 관리로 메뉴 관리하기
sold-outclass를 추가하여 상태를 변경한다.