[React] Drawer와 Tab, Accordian - Console 콘솔에러 제거하기

[React] https://hhahee.tistory.com/174

Drawer와 Tab, Accordian으로 FAQ 구현하기

위 포스팅에서 초래된 콘솔 에러 해결해보기

 

모두 정상동작하지만 콘솔의 에러 (경고) 코드를 제거하고 싶었다. 

---

1. FaqsTabs.tsx:84 Warning: Each child in a list should have a unique "key" prop.

• 위의 에러에 나온 84번째 줄은 <TabPanel> 컴포넌트 였는데, 이미 key prop이 index로 들어가 있어서 한참 헤맸다.
• key 에 uuidV4()로 값을 넣어주는 등 여러가지 시도를 해봤다.
• 결론적으로는 에러코드에 나온 줄이 아닌, <TabPanel>의 자식 컴포넌트인 <Accordion> 컴포넌트의 key prop 부재로 나타난 에러
• <Accordion>에 key 값을 넣어주니 해결되었다.

<Accordion
    expanded={expanded === index ? true : false}
    onChange={handleItemChange(index)}
    key={index}
    >

 

 

---

2. Warning: Received `false` for a non-boolean attribute `expanded`.

If you want to write it to the DOM, pass a string instead: expanded="false" or expanded={value.toString()}. 

If you used to conditionally omit it with expanded={condition && value}, pass expanded={condition ? value : undefined} instead.

 

• 이 에러는, useState의 형식을 아래와 같이 number | false 로 설정하여 나는건가 하여 바꿔보았습니다. 
  • 기존 코드:   const [expanded, setExpanded] = React.useState<number | false>(false);

    수정 코드 :  const [expanded, setExpanded] = React.useState<number>(-1);
  • useState에 사용된 expanded를 순수 number 형식으로 바꿔주었습니다.
• <Accordion>과 <AccordionSummary> 컴포넌트 (각 <MuiAccordion> 과 <MuiAccordionSummary> 컴포넌트를 스타일 커스텀한 컴포넌트) 에서
  • <Accordion>은 기본 내장 props로 expanded가 있다.

    • 

      expanded props에 대한 설명
    • 그리고 기존에는 expanded={expanded === index} 이렇게 index일 경우 open되도록 하고 있었는데, 명시적으로 변경해주었다.
      

      •  expanded={expanded === index ? true : false}

  • <AccordionSummary> 에서는 expand된 question과 answer에 스타일을 다르게 주기 위하여 expanded라는 추가 props를 사용하고 있는데, 
    • 밑에 참고문헌 1 에서 나온 방법대로 해결하였다. 

    • expanded={+(expanded === index)}

       boolean형태를 number로 바꿔주기 위하여 앞에 +를 추가해주었고, 커스텀한 컴포넌트의 추가 props 형식도 number로 바꿔주었다. 
    • 그러니 콘솔 에러가 사라졌다. 
    • 참고로 true는 1로, false는 0으로 변환된다고 한다(아래 그림 참조)

 

 

---

3. 열린 Accordion 클릭 시, 닫히도록 설정하기

• Accordion을 하나씩 열리도록 기본 설정되어 있었는데, 
• 기존 코드대로면, 열려있는 항목 클릭시 그대로 유지되고 있었다.
• 추가로, 열려있는 항목 클릭 시, 닫히도록 설정해보았다. 
  • 간단하게 <Accordion> (<MuiAccordion>) 컴포넌트의 onChange 함수를 바꾸어 주면 된다. 나는 함수명을 handleItemChange 로 설정하였고, index를 넣어 어떤 panel이 열리고 있는지 정보를 전달해 주었다. 

  • const handleItemChange =
        (panel: number) => (event: React.SyntheticEvent, newExpanded: boolean) => {
          if (panel === expanded) {
            setExpanded(-1); // 현재 열린 것 클릭 시 닫힘
          } else {
            setExpanded(panel);
          }
        };

 

 

참고 문헌 1: https://maximeblanc.fr/blog/how-to-fix-the-received-true-for-a-non-boolean-attribute-error/

How to fix the 'Received "true" for a non-boolean attribute' error