React 세미나 1 update함수 오류 about seminar-2022

[joongwon]

간단히 말하면 setMenus를 여러번 호출해서 생긴 문제입니다.

setMenus를 호출하더라도 당장은 menus의 값이 변하지 않습니다. (정확히는 update 함수에서 캡처한 menus 변수의 값이 불변입니다) menus라는 변수가 담고 있는 값은 언제까지나 이전 렌더링에서 얻은 값입니다. 때문에 실제 setMenus 호출은 아래와 같이 이루어집니다.

setMenus(이전 리스트에서 1번 메뉴가 선택 해제된 리스트)
setMenus(이전 리스트에서 2번 메뉴가 선택 해제된 리스트)
setMenus(이전 리스트에서 3번 메뉴가 선택 해제된 리스트)
...
setMenus(이전 리스트에서 id번 메뉴가 선택된 리스트)

최종적으로는 가장 마지막에 호출한 setMenus만 적용됩니다. 그러면 나머지 선택 해제된 값은 전부 무시되고 마지막에 메뉴가 추가로 선택된 리스트만 남게 됩니다.

해결 방법은 간단합니다. 모든 업데이트를 적용한 한 번의 setMenus만 호출해주시면 됩니다. 이를테면 아래 코드처럼 짤 수 있습니다.

예시 코드

setMenus(menus
    .map((m) => ({
        ...m,
        isselected: m.id === menu.id ? "selected" : "none"
    })));

[joongwon]

질문 올려주셔서 감사합니다. 다만 앞으로 코드는 복붙해서 ```codes```로 감싸주시기 바랍니다.