기본 TextArea의 확장성 고민 (정적? 동적?)

목차

1. 문제 배경 및 결론 요약

    1-1. 문제 배경

    1-2. 결론 요약

2. 왜?

---

1. 문제 배경 및 결론 요약

1. 문제 배경

TextArea를 만드는 내내 했던 생각이 있다.

현재 프로젝트 기획상 아직 모든 게 나오지는 않았지만, 분명 동적인 TextArea가 생길 것이다. (챗봇과의 대화 페이지)

이렇게 처음에는 한줄이었다가, 특정 height까지 늘어나는 TextArea

 

이 부분에 대한 언급이 아직 없어서 기본 TextArea를 정적으로 만들었는데, 저런 동적인 부분을 어떻게 넣을 것인가에 대한 생각이다.

 

"기본 TextArea에서 props와 조건을 추가할까?"

→ "하지만 대부분의 TextArea는 정적일텐데 그럼 로직이 과하게 복잡해지고 유지보수 부담이 커지는 것 아닐까?"

 

"동적인 TextArea 컴포넌트를 따로 만들까?"

→ "그런데 이런 동적 TextArea가 우리 프로젝트에서 그렇게 여러개가 생길까?"

 

"정적인 기본 TextArea 컴포넌트를 활용한 동적 wrapper 컴포넌트를 만들까?"

→ "가장 나아보이긴 하는데.. 일단 기획안이 없으니 다른 것부터 하자!"

 

이렇게 미뤄뒀다가 최근 좀 진행이 되고 다시 이 TextArea를 마주하게 되었다.

우리 프로젝트의 현재 상황을 살펴보면 아래와 같다.

• 대부분의 사용처는 고정 높이(정적) TextArea가 될 것으로 예상
• 채팅 페이지와 같이 입력량이 많아지면 height이 늘어나는 동적 TextArea가 필요함 (현재 단계에서는 아마 이거 하나)
• 팀은 Wrapper 방식을 채택했으며, 현재 폴더 구조는 [공용UI 폴더 + 각 페이지/도메인 폴더] 가 메인
• 재사용성, 책임 분리, 접근성을 고려하여 설계해야함

2. 결론 요약

• 처음에 어렴풋이 생각한 것과 같이 기본 TextArea는 정적으로 유지하여 공용 UI로써 역할을 유지하기로 했다.
• 당장 필요한 동적 TextArea는 ChatTextArea 한 개로 예상되어, 래퍼 컴포넌트로 구현하고, src/app/chat/components 하위에 두도록 한다.
• 기본 TextArea에 autoResize?: boolean, maxHeight?: number 와 같은 옵션을 추가하되, 동적 전용 로직은 래퍼에서 캡슐화를 해보자.

---

2. 왜?

1. 책임 분리

UI 스타일 및 기본 속성은 TextArea에 두고, autoResize와 같은 특화 로직은 래퍼가 담당하여, 변경 사항 발생 시, 영향 범위를 줄일 수 있다. 다른 TextArea들과 명확하게 다른 특성이기 때문에 변경 사항 발생에 대비하여 명확하게 구분을 두는 것이 좋다고 생각했다.

 

2. 사용성

개발자가 TextArea를 사용할 때에 너무 많은 선택지(props)를 주는 것이 부담이 된다고 생각했다.

TextArea에 props를 많이 준다는 것은 확장성이 있다는 장점을 가지지만,

반대로 말하면 해당 컴포넌트가 정확하게 어떤 기능을 가지는 지 알기 위해서 시간을 많이 들여야한다는 의미가 되기도 한다.

ChatTextArea, 혹은 DynamicTextArea와 같이 기능을 추가한 TextArea를 구분하면, 컴포넌트를 사용하는 개발자는 해당 컴포넌트가 어떤 역할을 가지는지 예측하기 쉬워지며, 어떤 props와 기능을 가질 지 예측하기 역시 쉬워진다.

 

3. 테스트/유지보수

Resize 관련 기능을 빼면 관련 버그 추적이 쉬워진다.

기본 TextArea에 비해 edge case(줄 수 축소, IME 조합 등)가 많기 때문에 분리하는 편이 안전하다고 생각했다.

추후 애니메이션이나 최적화면에서도 이슈가 생길 확률이 높다고 생각한다.

 

 

 

 

구현은.. 내일이나 모레 해야겠다.

지금이 새벽 2시 반이기 때문이다..

 

 

 

 

참고

https://stackoverflow.com/questions/454202/creating-a-textarea-with-auto-resize

Creating a textarea with auto-resize

https://velog.io/@jsi06138/Auto-resize-textarea

Auto resize되는 textarea 만들기

https://stackoverflow.com/questions/79235540/textarea-not-resizing-correctly-on-input-in-javascript

Textarea not resizing correctly on input in JavaScript