anonymousRecords
commented
1 month ago 📌 상황 분석
1. 수정 전 코드 관련 커밋
<Dropdown
buttonContent={
assignedWorkers.find((worker) => worker.date === dateofSelectedDate)
?.workers[0]
}
dropdownContent={dropdownContents}
/>interface DropdownProps {
buttonContent: React.ReactNode;
dropdownContent: React.ReactNode[];
onSelect: (selectedOption) => void;
}
...
const [selectedContent, setSelectedContent] = useState<React.ReactNode>(buttonContent);<Dropdown
buttonContent={dropdownData[columnIndex][rowIndex]} // buttonContent 부분에 <ul>, <li> 태그로 실제 구현하여 넘겨줌.
onSelect={(index: number) => {
handleDropDownChange(columnIndex, rowIndex, index);
}}
/>1.1. 드롭다운 컴포넌트 설계
우선 위처럼 구현을 하여, 드롭다운 컴포넌트를 구현하였다. 드롭다운 컴포넌트는 두 페이지(냉판, 샌드위치)에서 사용을 하였다.
따라서 공통 컴포넌트로 하여 구현할 계획이었다.
그래서 어떻게 드롭다운 컴포넌트를 구현할지 설계를 먼저 진행하였다.
(출처 : https://ui.shadcn.com/docs/components/dropdown-menu)
(1) trigger에는 초기 값이 노출되어 보여짐. (2) trigger 클릭 시, 드롭다운이 펼쳐지면서 선택지들이 보여짐. (3) 선택지를 클릭하면, 해당 선택지로 trigger가 변경됨.
첫 번째로 공통 컴포넌트는 polymorphic한 것이 중요하다고 보았다. (참고 포스트)
따라서 선택지를 자유롭게 설정하는 것에 집중하였던 것 같다. 예를 들어 <ul>, <li> 태그로 구현할 수도 있지만, <div> 태그로도 할 수도 있고 자유롭게 두고 싶었다.
그리고 두 번째로 클릭한 선택지를 어떻게 확인할 지였다. trigger에 노출되는 값은 선택지 클릭에 따라 달라진다. 따라서 클릭 이벤트를 감지하고, 클릭한 값을 trigger에 반영을 어떻게 할지 고민하였다.
➕ 초반에는 이렇게 선택지에 div element를 보이게 하였다.
1.2. 초기 드롭다운 구현 위 고민을 거쳐 드롭다운을 구현하였다.
interface DropdownProps {
buttonContent: React.ReactNode;
dropdownContent: React.ReactNode[];
}interface를 살펴보면, trigger에 노출되는 값을 뜻하는 buttonContent와 dropdownContent를 전달받도록 하였다.
그리고 드롭다운 내에서는 2개의 상태를 관리하도록 하였다.
const [selectedContent, setSelectedContent] = useState<React.ReactNode>(buttonContent);
const [isOpen, setIsOpen] = useState(false);클릭한 선택지 상태를 관리하는 selectedContent와 드롭다운이 펼쳐지고 닫히는 상태를 관리하는 isOpen을 두었다.
trigger 역할을 하는 button 내에 selectedContent를 두어 선택지 변경에 따라 trigger에 노출되는 값을 변경하게 하였다. 그리고 isOpen이 true일 때만 div 태그가 노출되게 하여, 드롭다운이 펼쳐지고 닫히는 기능을 구현하였다. div 태그 내에는 prop으로 전달받은 dropdownContent를 map으로 보이게 하였고, 버튼을 클릭하면 handleContentSelect 함수를 통해 선택을 감지하게 하였다.
<button>
{selectedContent}
</button>
{isOpen & (
<div>
{dropdownCotent.map((content, index) => (
<button onClick={() => handleContentSelect(content)}>
{content}
</button>
)}
</div>
)}
)}handleCotnentSelect 함수를 살펴보면 아래와 같다.
const handleContentSelect = (content: React.ReactNode) => {
setSelectedContent(content);
toggleDropdown();
};전달받은 parameter를 selectedContent로 상태를 변경하고 toggleDropdown 함수를 호출하여 펼쳐진 드롭다운을 닫는 것이다.
이때까지만 해도, 드롭다운이 잘 펼쳐지고 닫히고, 무엇보다 클릭한 선택지로 드롭다운 trigger에 잘 반영이 되어 문제가 없다고 생각했다.
📌 문제 상황
드롭다운으로 데이터를 변경하면, 해당 데이터가 화면에 반영이 되지 않는 현상이 발생함.
해당 이슈는 드롭다운을 사용하는 냉판 페이지에서도 동일하게 발생하였고, 데이터 변경을 두 번 실행하면 적용되는 상황이었음.