antd Dropdown 컴포넌트에서 파라미터를 overlay로 전달하는 방법

React antd 라이브러리의 Dropdown 컴포넌트는 자주 사용되는 UI 컴포넌트입니다. 이 경우 드랍다운시 나타낼 메뉴는 overlay를 사용하여 Dropdown될 경우 나타나게 될 엘리먼트로 추가하게 됩니다. 여기서 overlay에 만약 엘리먼트 요소뿐만 아니라 파라미터를 함께 넘기고 싶다면 어떻게 할 수 있을까요?

# antd Dropdown 컴포넌트 overlay 요소에 파라미터 전달

먼저 Dropdown 컴포넌트의 overlay에 파라미터를 전달할 수 있습니다. 이 경우 방법은 생각보다 간단한데 바로 overlay에 리액트 엘리먼트를 바로 전달하지 않고 함수로 변경하여 사용하는 방법입니다.

"리액트 엘리먼트를 함수로 변경하여 전달할 것"

그럼 예제를 만들고 알아보겠습니다. 만약 아래와 같이 Dropdown 컴포넌트가 존재한다고 생각해보면 먼저 함수 형태가 아닌 일반적인 엘리먼트 요소 myMenu를 변수로 선언 후 overlay에 전달하기 위해 아래와 같이 사용할 수 있겠죠.
먼저 Dropdown 컴포넌트를 사용합니다.

그리고 overlay에 사용할 메뉴는 myMenu 변수로 입력합니다.

위의 코드는 파라미터 전달 없는 단순한 구조입니다. 보시면 <Menu.Item>은 '메뉴 이름'을 화면에 출력하는데요 우리는 이 '메뉴 이름'을 파라미터로 전달하고자 합니다. 아래는 수정 된 코드입니다.


  !! 함수로 변경 후 파라미터 전달하는 코드로 변경  
미리 말한 것처럼 간단히 함수로 변경 한 후 overlay에 전달하면 됩니다. 물론 파라미터를 포함해서 말이죠. 메뉴 이름은 '웹이즈프리'로 전달하도록 하겠습니다.

다음은 함수로 변경된 myMenu입니다.

보시면 myMenu의 타입이 함수로 변경되고 name을 인자로 받는 것을 확인할 수 있습니다.

여기까지 모든 과정이 끝났습니다. 이제 Dropdown에 원하는 값 등을 넘길 수 있어 다이나믹하게 Dropdown을 변경하는 것도 가능합니다.