React Spectrum

7월 15일 Adobe의 디자인 시스템react-spectrum이 발표되었습니다.

디자인도 훌륭하지만 다른 부분의 퀄리티는 개인적으로 충격적이어서 소개해 드리려고 합니다.p>

어디 대단해?

• 논리와 UI를 완전히 분해하여 논리적인 부분을 재활용할 수 있는 곳
  
  • 자신·자사의 디자인 시스템을 제작하고자 하는 경우 논리만 빌려 설치할 수 있다
  
  
• 논리 부분의 질이 너무 높다(cross-platform,accessibility, 다중 언어는 1년 반 이상의 시간을 들여 개발·테스트를 한다)
• 보통 UI가 예뻐요.

• react-aria 맞춤형 Hooks를 이용하여 플랫폼과 장치에 따라 다양한 동작을 유니버설
  
  • 예를 들어, onClick 비헤이비어는 마우스를 사용하지 않는 다른 장치에서는 들리지 않을 수 있지만 onPress 이벤트를 통해 통합됩니다
  
  
• react-stately 사용자 인터페이스에 의존하지 않는 복잡한React 구성 요소의 논리 제공
  
  • DatePicker, Table, Search, Navigation, Toast, Virtualizer 등
  
  
• 조합 논리 부분을 통해 보조 기능이 높은 좋아하는 구성 요소를 쉽게 만들 수 있다
• 아직 개발 중인 구성 요소가 있는 것 같습니다.

TailwindCSS 사용 예

Started playing around with making some examples of using React Aria with @tailwindcss . So far, I've made completely custom styled buttons, checkboxes, textfields, and selects. And they're fully accessible. In 1 hour! 🤯

Try them out yourself: https://t.co/w4SgyIcPmK pic.twitter.com/2Ks2fttxMC

— Devon Govett (@devongovett) July 18, 2020