핵심 코드
<button onMouseEnter={() => setButtonHovered(!hovered)} onMouseLeave={() => setButtonHovered(!hovered)} onClick={onClick} style={{ ...props.style, ...buttonStyle }} {...props}> {children} </button>
useState로 컴포넌트 내에서의 hovered 상태를 관리하였다.
Storybook
느낀 점
단순해 보이는 컴포넌트도 생각보다 구현이 쉽지 않았다. '상태' 와 '이펙트'와 같은 '키워드'에 대한 정확한 정의를 이해하고 개발하는 것과 그렇지 않은 것에는 큰 차이가 있다.