이번엔 젭알 꼬박꼬박 읽고 좀 남기자 😊🎏
0104- "프레젠테이션/ 컨테이너 컴포넌트 패턴"
Presentational and Container Components
Building Your Own Hooks
용어를 우연히 듣게 되어 검색해보았다. 특별한건 아니었다. 대개의 프론트개발 방식이라고 느껴졌는데 아마 예전부터 유행하던(?) 어쩌면 강요받아온 방식이라고 댄이 얘기한 것처럼 그렇게 배워왔기 때문 아닐까 싶었다. ui와 logic의 분리, 내가 해온 개발로 돌아보면, atomic이라는 작은 단위의 디자인 ui부터 atomic의 조합인 component로 발전해나가는 것처럼 비즈니스/UI 로직을 외부에서 props나 children으로 전달받아 나가는 것을 의미하는 것이다. 이 작업이 무리할 시에 ui 컴포넌트를 로직을 담은 외부 컴포넌트로 감싸가면서 거대한 컴포넌트를 양산하고, 디버깅을 위해 children을 계속 타고 내려갔던 기억이 나긴한다. 나는 전달해나가는 props / children들이 UI에 관련된 것이라면 좋은 방법이라고 생각한다. 다만, dan이 이 패턴을 강조한 것을 다시 회고했는데, 사용상 필요에 의하면 추천 그게 아닌 단순히 관심사 분리를 위한 것이라면 react hook을 사용하는 것을 예로 들었다. 회사에서 주로 사용하고 있는 mobx mvc구조에서는 controller의 역할이 이 것을 대신하고있다는 생각이든다. 물론, hook은 여러 컴포넌트에서 실행할때마다 새로운 값을 만들어 내는 것이고 전역상태로 사용하는 mobx는 하나의 값을 변경 시키는 차이가 있다.
0112 radix - So You Think You Can Build A Dropdown?
- 관심사 분리의 대표적인 예라고 할 수 있을 것 같다.
- 아토믹 컴포넌트를 만든다면 이렇게 해야겠구나를 느낌
- 아토믹은 css를 제외한 기본 뼈대만 구성하고 ui의 기능만 집어넣자.
- 사용자 경험, 접근성의 신세계를 맛보앗다...
- 드롭다운에서 마우스 써볼 생각만 했지, 키보드의 방향키나 단축키를 적용해야한다고 생각하지 못했는데, 이 라이브러리에서는 그런 기능이 매우 간단하게 지원이된다.
- 스크린 리더까지... ㄷㄷ
- 기존의 mui와 같은 라이브러리는 자체 디자인요소가 많이 반영되어서 커스텀하기 까다로운 문제때문에 사용이 지양되었는데 이 radix는 기능만 있으니 스타일링에서 막힐 걱정을 할필요가 없을 것 같다.
