<aside> <img src="/icons/exclamation-mark_lightgray.svg" alt="/icons/exclamation-mark_lightgray.svg" width="40px" /> NextUI의 Button 및 그외 리액션이 있는 컴포넌트들에서 공통으로 발생

</aside>

아래 Button 1을 클릭하면 다른 Button 2도 repainting이 발생한다.

import { Button } from '@nextui-org/react';

export default function CompAce() {
  return (
    <div className={'flex flex-col gap-4'}>
      <div>
        <Button>Button 1</Button>
      </div>
      <div>
        <Button>Button 2</Button>
      </div>
    </div>
  );
}

<aside> <img src="/icons/question-mark_yellow.svg" alt="/icons/question-mark_yellow.svg" width="40px" /> 이유는 클릭 시 애니메이션으로 인해 부모 컴포넌트에 영향을 주고 그로인해 다른 컴포넌트에도 영향을 줘서 발생하는게 아닌가하는 추측을 해본다. (정확한 원인은 모르겠다.)

</aside>

이 repainting 되는 현상을 방지하기 위해선 부모 컴포넌트에 overflow-hidden (또는 auto)를 설정하면 해결된다.

• 물론 이를 위해선 버튼의 wrapper 컴포넌트가 필요하다.

import { Button } from '@nextui-org/react';

export default function CompAce() {
  return (
    <div className={'flex flex-col gap-4 *:overflow-hidden'}>
      <div>
        <Button>Button 1</Button>
      </div>
      <div>
        <Button>Button 2</Button>
      </div>
    </div>
  );
}