utterances-bot commented 2 years ago

Select 컴포넌트 | SOSOLOG

Intro 어떤 디자인 시스템에서 컴포넌트를 제공한다면, 어떤 기능들을 기대하시나요? 이 글에서는 Select컴포넌트에게 바라는 기능을 중심으로 구현 방법과 예제 코드를 설명합니다. ⚠️ 이 글에서 소개되는 코드는 모두 수도코드(pseudo code)입니다. 동작여부보다는 소개하고자하는 맥락을 중심으로 작성되었습니다. T

https://so-so.dev/react/make-select/

p-iknow commented 2 years ago

와 컴포넌트 만들기의 메타분석 이네요!!. 복잡 다단한 lib 안쪽의 내부 구현은 도대체 어떤 의도와 생각을 가지고 만들었을까? 궁금했는데, 해설서를 본 느낌입니다. 빠른 컨셉이해를 위해 수도코드 형식으로 작성되서 더 이해가 쉬웠어요. 좋은 글 써주셔서 감사하게 잘 읽었어요. :bow

글 보다가 약간의 궁금증이 생겼어요. Collection 의 자료구조를 map으로 채택한 것은 key값에 string이 아닌 ref 값 자체를 쓰려고 했기 때문인 거겟죠?? 별도로 string 을 key로 채택하지 않은 것은 조회할 때 ref 자체를 쓰는게 더 편하니까 그랬을 것 같네요. (string을 key값으로 한다면 각 ref별 key를 generate 해야하고, 사용처에서도 generated된 key를 잘 들고, ref를 select 할때도 그 key를 알아야하는데, 실제 값 이외에 정보(key string) 만드는게 비용이니까?) 요 부분은 어떻게 생각하시는 궁금하네요.

SoYoung210 commented 2 years ago

@p-iknow 안녕하세요, 답이 많이 늦었네요 🙏 Collection자료구조를 선택한 이유와 배경은 저도 비슷하게 생각합니다. ref가 아닌 다른 값을 사용하려면 내부적으로 useId나 component type을 기준으로 유니크한 Symbol을 만들 수도 있었겠지만 이미 목적을 이룰 수 있는 값(ref)이 있으니 그것을 사용했다..정도로 추측해봅니다. :)

제가 작성했다면 key를 primitive 값으로 사용하지 않는 것이 저도 익숙치 않아서 이런 스타일의 코드를 작성하지 않았을 것 같기도 한데, 말그대로 익숙함의 차이인것 같아요 ㅎㅎ

ivaaaaann commented 1 year ago

혹시 위 코드를 더 상세히 알 수 있는 레퍼런스 있을까요..!

SoYoung210 commented 1 year ago

@ldh3907 제가 만든 컴포넌트는 오픈소스가 아니라서 공유드리기가 어렵네요.

오픈소스 Combobox구현체를 살펴보시는것을 추천드립니다.

SoYoung210 / SOSO

react/make-select/ #101

Select 컴포넌트 | SOSOLOG