Multi Collapse 구현 방법, 예시 코드

설명

---

material-ui에서 제공하는 component API 중 List의 Collapse에 대한 이야기입니다.

 

아래 예시는 List와 Collapse로 Sidebar를 구현한 것입니다.

(Multi List, Multi Collapse)

예시 코드

---

open에 대한 state를 List 또는 Object로 선언하고 사용합니다.

 

List로 선언 및 사용하는 state

        
text
        

            
        
     
  const [open, setOpen] = React.useState([false, false]);
  const handleClick = (i) => {
    const o = { ...open };
    o[i] = !o[i];
    setOpen(o);
  };

 

 

반환하는 JSX

        
text
        

            
        
     
<div
  style={{
    display: "flex",
    overflow: "auto",
    width: 300,
    backgroundColor: "#F0F0F0",
  }}
>
  <List
    subheader={<ListSubheader>실습</ListSubheader>}
    style={{
      width: "100%",
    }}
  >
    <ListItem button onClick={() => handleClick(0)}>
      <ListItemText primary="실습 1" />
      {open[0] ? <ExpandLess /> : <ExpandMore />}
    </ListItem>
    <Collapse in={open[0]} timeout="auto" unmountOnExit>
      <List
        disablePadding
        subheader={
          <ListSubheader>&nbsp;&nbsp;&nbsp;&nbsp;문제</ListSubheader>
        }
      >
        <ListItem button>
          <ListItemText primary="&nbsp;&nbsp;&nbsp;&nbsp;문제 1" />
        </ListItem>
        <ListItem button>
          <ListItemText primary="&nbsp;&nbsp;&nbsp;&nbsp;문제 2" />
        </ListItem>
        <ListItem button>
          <ListItemText primary="&nbsp;&nbsp;&nbsp;&nbsp;문제 3" />
        </ListItem>
      </List>
    </Collapse>
    <ListItem button onClick={() => handleClick(1)}>
      <ListItemText primary="실습 2" />
      {open[1] ? <ExpandLess /> : <ExpandMore />}
    </ListItem>
    <Collapse in={open[1]} timeout="auto" unmountOnExit>
      <List
        disablePadding
        subheader={
          <ListSubheader>&nbsp;&nbsp;&nbsp;&nbsp;문제</ListSubheader>
        }
      >
        <ListItem button>
          <ListItemText primary="&nbsp;&nbsp;&nbsp;&nbsp;문제 1" />
        </ListItem>
        <ListItem button>
          <ListItemText primary="&nbsp;&nbsp;&nbsp;&nbsp;문제 2" />
        </ListItem>
      </List>
    </Collapse>
  </List>
</div>

합니다.

 

 

 

스샷

Collapse 펼치기 전

 

Collapse 하나만 펼친 경우

Collapse 전부 펼친 경우

 

 

 

참조

---

React List component - Material UI