[MUI] Accordion 클릭 핸들링하기

MUI의 accordion 컴포넌트에서 헤맸던 부분을 정리하기 위함!

https://mui.com/material-ui/api/accordion/

Accordion API - Material UI

MUI 사이트에서 정보를 찾아볼때, 예시코드가 있는 페이지도 좋지만 상세 컨트롤을 원할땐 API가 별도 서술되어 있는 페이지가 원하는 기능을 찾기에 적합하다.

 

1. 한 항목을 클릭하면 다른항목 자동 접기

<Accordion expanded={o.id === selectedNumber} >

expanded 옵션을 사용하면 state 값으로 accordion을 조절 할수 있다!

한번에 모두 접기 + 펼치기 옵션도 해당 버튼 true false 값을 state로 지정하고 expanded에 넣어주면 구현 가능하다.

나 같은 경우는 해당 accordion 클릭시 정보의 id가 선택된 값에 들어가는데, expanded에 해당 값일때만 expanded가 되도록 설정 해두었고, 이렇게 하면 다른 accordion을 클릭하면 이전에 열었던 부분은 자동으로 닫힌다!

 

-) 이렇게 설정하면 해당 아코디언을 다시 눌렀을때 닫혔다 열렸다 하는 부분이 지원되지 않는다ㅠㅠ 여러개를 동시에 여는 동작도 불가함

 

2. 체크박스 이용시에 accordion 동작 막기

소박하게 그려보았따...그림판으로

체크박스가 들어간 아코디언을 만들었는데,

1. (핑크) 체크박스 + 라벨(이름) 클릭시에는 클릭한 이름 state에 해당값을 넣으나 아코디언은 움직이지 않기

2. (하늘) 핑크 부분 외의 여백 누르면 아코디언 열고 닫기가 작동, 체크박스 반응 없음

이런 로직을 원했음

<Accordion>
	<AccordionSummary>
		<div>
			<input
			value={o.id}
			id={o.id}
			type="checkbox"
			// 체크박스를 클릭해도 아코디언이 움직이지 않게 설정
			onClick={(e) => e.stopPropagation()}
			/>
			{/* 라벨 클릭시에는 체크박스 체크되고 아코디언 움직임 비활성화 */}
			<label htmlFor={o.id} onClick={(e) => e.stopPropagation()}>
				{o.name}
			</label>
		</div>
	</AccordionSummary>
	<AccordionDetails>
	// accordion deatils...
	</AccordionDetails>
</Accordion>

input:checkbox와 label에 각각 e.stopPropagation()으로 이벤트 전파를 막아주면 된다!