인프런 커뮤니티 질문&답변

antd install 받고, doc 보면서 적용을 해보려고 합니다.

기존 영상에는 doc에 class 형식으로 예제 소스가 되어있었지만, 현재는 일단은 함수형(?)으로 되어있는것으로 보입니다.

그런데, 처음 보는 문법들이 많이 등장하지만 검색 키워드를 정의하기가 난해하여 질문드립니다.

(처음 보는 문법은 강조 표시하였습니다.)

*antd 예제 소스입니다.

import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';

import type { MenuProps } from 'antd'; import { Menu } from 'antd';

import React from 'react';

type MenuItem = Required<MenuProps>['items'][number];

function getItem(

label: React.ReactNode,

key?: React.Key | null,

icon?: React.ReactNode,

children?: MenuItem[],

type?: 'group',
): MenuItem { return { key, icon, children, label, type, } as MenuItem; }

질문 1: 매개 변수가 key, value 형식으로 들어간 부분

질문 2: 매개 변수 key값에 '?'가 들어간 부분(객체값 추출시 obj.?key랑 비슷한걸까요...?)

질문 3: return값에 'as'를 붙인 부분(해당 함수 위에 type이라는 object가 있는데, typescipt같은 걸까요? 해당 타입으로 반환한다는 거 같기는합니다.)

const items: MenuItem[] = [

getItem('Navigation One', 'sub1', <MailOutlined />, [ getItem('Item 1', null, null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'), getItem('Item 2', null, null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'), ]), getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [ getItem('Option 5', '5'), getItem('Option 6', '6'), getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]), ]), getItem('Navigation Three', 'sub4', <SettingOutlined />, [ getItem('Option 9', '9'), getItem('Option 10', '10'), getItem('Option 11', '11'), getItem('Option 12', '12'), ]),

];

질문 4: 변수명 뒤에 ': MenuItem[]' 역시 해당 변수의 타입을 정의한걸까요??

const onClick: MenuProps['onClick'] = e => { console.log('click', e); };

const App: React.FC = () => ( <Menu onClick={onClick} style={{ width: 256 }} mode="vertical" items={items} /> );

export default App;