<aside>
</aside>
TextInput, SearchInput, Textarea와 같이 유사한 특성을 가진 입력 컴포넌트들의 구현 방식을 고민하게 되었다. 기본 스타일링이 대부분 동일한 이 컴포넌트들을 하나로 통합할지, 부분적으로 통합할지, 혹은 개별적으로 구현할지를 결정해야 했다.
현재 진행 중인 단기 토이 프로젝트의 특성상 공통 컴포넌트의 재사용성이나 다양한 변형(variation)에 대한 요구사항이 크지 않다. 하지만 '좋은 컴포넌트'를 설계하기 위해서는 실제 기업의 디자인 시스템을 참고하고 지향하는 것이 도움이 된다고 생각한다. 디자인 시스템은 다양한 사용 사례에 유연하게 대응할 수 있는 재사용 가능한 구조와 일관된 코드 스타일을 제공함으로써 개발 생산성을 향상시키기 때문이다.
이러한 관점에서 여러 기업들의 디자인 시스템 레퍼런스를 참고하고 최적의 구현 방식에 대해 결정해보고자 한다.
세가지 컴포넌트에서 필요로 할 값들을 생각해봤다.
처음에는 TextInput과 SearchInput이 거의 동일한 UI를 가지고 있기 때문에 Suffix(검색 버튼)유무만 추가해서 하나의 컴포넌트로 합쳐도 괜찮을거라 생각했다. 그런데 특성을 정리해놓고 보니 TextInput에는 필요하지만 SearchInput에서는 필요하지 않은 것들이 많고 SearchInput에 필요한 핸들러가 TextInput에서는 필요하지 않아보인다. prop의 수를 늘려서 두 케이스를 모두 허용할 것이냐, 그냥 각각 구현할 것인가가 여전히 고민된다.
→ SearchInput을 따로 만들지 않고 TextInput에 Search 기능을 통합할 것인가?
TextArea의 경우에는 TextInput과 완전히 동일해 보인다. 다만 input 태그를 쓰느냐 textarea 태그를 쓰느냐의 차이만 존재하는 것 같아서, 다형성 컴포넌트로 합쳐서 구현해도 문제가 없지 않을까 싶다.
→ TextInput과 TextArea를 통합할 것인가?
몇가지 레퍼런스를 찾아보았을 땐, 웬만하면 컴포넌트를 분리해서 사용하는 모습이 많이 보였다.
세가지 컴포넌트를 모두 따로 구현하고 있다.