프로젝트 마무리: 각종 콘솔 워닝 해결

공모전용 플젝 하나를 마치며 여러 콘솔 워닝들을 해결했다.

사실 warning은 말 그대로 경고기 때문에 프로그램 실행에는 문제가 없지만, 해결을 안해주면 매우 거슬리기 때문에 최종 제출 전 한 번에 해결해 줬다(물론 고치는게 프로그램 안정성에도 좋다).

 

1. Warning: Invalid DOM property 'class'. Did you mean 'className'?

다른 엘리먼트엔 className 잘 써놓고 딱 하나에 class를 사용했다. IDE의 자동완성 기능을 맹신하지 말자..

리액트, 즉 JSX는 JavaScript를 확장한 문법이다. JS의 모든 기능이 포함되어 있으며 class의 다른 의미가 있기 때문에 className을 사용해야 한다.

 

해결 방법: 엘리먼트에서 class대신 className을 사용한다.

// 수정 전
<div class={styles.bird_container_two}>

// 수정 후
<div className={styles.bird_container_two}>

 

 

2. Warning: [antd: Menu] 'inlineCollapsed' not control Menu under Sider. Should set 'collapsed' on Sider instead.

antd에서 Menu 컴포넌트를 가져올 때 공식 api대로 사용했는데 워닝이 떴다. Sider에서는 inlinecollapsed 대신 collapsed로 메뉴바의 접힘을 관리해야 하는 것 같다.

 

해결 방법: inlinecollapsed 대신 collapsed을 사용한다.

// 수정 전
<Menu theme="light" mode="inline" inlineCollapsed={collapsed} style={{ marginTop: "10vh", zIndex: "100" }}>

// 수정 후
<Menu theme="light" mode="inline" collapsed={collapsed} style={{ marginTop: "10vh", zIndex: "100" }}>

 

 

3. Warning: SubMenu should not leave undefined 'key'.

SubMenu의 아래 엘리먼트들에 고유한 key를 줘서 괜찮을 줄 알았는데 SubMenu 자체에도 키를 넣어줘야 한다.

 

해결 방법: 각 SubMenu에 겹치지 않게 key를 부여해준다.

// 수정 전
<SubMenu title="Accounts" icon={<MailOutlined />}>

// 수정 후
<SubMenu title="Accounts" icon={<MailOutlined />} key="submenu">

 

 

4. Warining: Received 'true' for a non-boolean attribute 'collapsed'. If you want to write it to the DOM, pass a string instead: collapsed="true" or collapsed={value.toString()}.

collapsed가 boolean type을 받는 속성이 아니었나보다. 읽어 보면 두 가지의 해결책을 주고 있다(꽤나 친절한 워닝).  첫 번째는 아예 boolean type 대신 string으로 true/false를 넘겨주라는 것이고, 두 번째는 넘겨받은 값을 toString()으로 가공해 넘겨주라는 것이다. collapsed를 다른 코드에서 어떻게 활용하고 있는지에 따라 선택해서 사용하면 된다.

나는

collapsed ? <...> : <...>;

와 같이 사용한 코드가 많았기 때문에 두 번째 방법을 선택했다.

 

해결 방법: toString()으로 boolean 값을 가공해서 전달한다.

// 수정 전
<Sider trigger={null} collapsible collapsed={collapsed} theme="light">

// 수정 후
<Sider trigger={null} collapsible collapsed={collapsed.toString()} theme="light">

---

해결되지 않은 워닝

1. antd 버전 업데이트에 대한 워닝

<Menu>
   <Menu.Item> ... </Menu.Item>
</Menu>

현재 위와 같이 사용하고 있는데

const menuItems = [
   {
       key: 'center',
       icon: <UserOutlined />,
       label: '11',
   },
   {
       key: 'settings',
       icon: <SettingOutlined />,
       label: '22',
   },
   {
       key: 'logout',
       icon: <LogoutOutlined />,
       label: '33',
   },
];
<Menu items={menuItems} />

위와 같이 items를 따로 선언해서 사용하라는 워닝이다. 나중에 프로그램을 확장할 일이 있다면 수정해야 할 것 같다.

 

2. 확실하진 않지만 antd의 문제인듯 한 워닝

StricMode는 React16에서 추가된 모드로 생명주기에 예상치 못한 오류를 발생시키는 것을 방지한다.

https://github.com/ant-design/ant-design/issues/22493

Using <Button> results in "findDOMNode is deprecated in StrictMode" warning · Issue #22493 · ant-design/ant-design

위 링크에 들어가 보면 antd를 사용하는 많은 유저들이 antd 컴포넌트 사용 시 StrictMode 에러가 뜬다고 항의하고 있다. antd 컴포넌트가 findDOMNode를 사용하기 때문에 발생하는 오류인 것 같다. 이 워닝을 제거하려면 StrictMode를 해제하면 되지만 바람직한 방법은 아니기 때문에 일단은 그대로 뒀다. antd 너네가 책임지도록 해라.

 

---

드디어 마지막 제출이 끝났다. 오늘 아침에 작년 대상 작품을 보고 약간 기죽었었지..만 제출하면서 극복했다.

좋은 결과가 있었으면 좋겠다😶

ㅋㅋㅋ

화이팅!