[React] react-contextmenu에서 react-contexify로 변경한 이유

React 기반 프로젝트에서 Context Menu를 사용하기 위해 기존에 react-contextmenu(github.com/vkbansal/react-contextmenu)를 사용하였다.

그러나, 속도 및 기타 이슈 등으로 인해 개선을 위해 react-contexify(github.com/fkhadra/react-contexify)로 변경하게 됨.

 

 

npm trends를 통해 react-contextmenu와 react-contexify를 비교해보았을 때, react-contextmenu가 월등히 높음.

(www.npmtrends.com/react-contexify-vs-react-contextmenu)

 

 

사용해본 결과로, react-contextmenu의 경우 depth가 1인 메뉴를 보여주는데는 딜레이가 없고 끊김 현상이 없음.

하지만 depth가 2,3.. 으로 늘어가는 상황이 흔하진 않지만, 저성능의 컴퓨터에서 끊기고 렉걸리는 듯한 움직임을 보임.

 

이로 인해 react-contexify로 변경하여 test한 결과, 속도 측면에서 개선된 모습이 보여 변경하게 됨.

 

또한, react-contextmenu는 더 이상 maintain이 되지 않기 때문에 계속해서 사용하는 입장이기 때문에 

아직까지는 관리가 되고 있는 react-contexify로 갈아타게 됨.

 

 

react-contexify의 단점으로는 document가 매우... 내용이 부족하다. 이 부분에 대해서는 시행착오가 필요할 것으로 보임.

 

Fig1. ContextMenu를 표시해야하는 부분의 코드

 <div onContextMenu={this.props.handleContextMenu}>
        <SecretInfo />
        <hr className="solid"></hr>
        <table className="width100border">
               .....
        </table>
      </div>

 

 

Fig2. react-contexify를 사용한 코드

                <Menu id={"menu_1"} animation={false}>
                  <Submenu label="Get Test1">
                    {this.renderTest1()}
                  </Submenu>
                  <Submenu label="Get Test2">
                    {this.renderTest2()}
                  </Submenu>
                  <Item onClick={() => this.openGetTest3()}>
                    Get Test3
                  </Item>
                  <Separator />
                  <Item onClick={() => this.reserveTest4()}>
                    Reserve Test4
                  </Item>
                  <Item onClick={() => this.saveTest5()}>
                    Save Test5
                  </Item>
                  <Separator />
                  <Item onClick={() => this.updateTest6()}>
                    Update Test6
                  </Item>
                  <Separator />
                  <Item onClick={() => this.openTest7()}>
                    Log Test7
                  </Item>
                  <Separator />
                  <Submenu label="Foobar">
                    <Item onClick={this.handleItemClick}>Sub Item 1</Item>
                    <Item onClick={this.handleItemClick}>Sub Item 2</Item>
                  </Submenu>
                </Menu>

 

 

Fig3. react-contexify를 사용한 후 item의 height를 변경하는 style.css

.react-contexify {}

.react-contexify__submenu--is-open,
.react-contexify__submenu--is-open > .react-contexify__item__content {}

.react-contexify__submenu--is-open > .react-contexify__submenu {}

.react-contexify .react-contexify__submenu {}

.react-contexify__submenu-arrow {}

.react-contexify__separator {}

.react-contexify__will-leave--disabled {}

.react-contexify__item {}

.react-contexify__item:not(.react-contexify__item--disabled):focus {
}

.react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__item__content,
.react-contexify__item:not(.react-contexify__item--disabled):focus > .react-contexify__item__content {}

.react-contexify__item:not(.react-contexify__item--disabled):hover > .react-contexify__submenu {}

.react-contexify__item--disabled {}

.react-contexify__item__content {
    height: 20px;
}

-> context menu 내부의 item에 style을 주기 위해서는 ".react-contexify__item__content"를 변경해야함.