Taskify 프로젝트 중 R&R을 하는 과정에서 우리 팀은 공통적으로 사용되는 컴포넌트를 도출해서 우선 순위로 먼저 개발을 하기로 했다.😎
사실 이전 프로젝트를 할때는 공통 컴포넌트로 만들어야겠다는 의식 자체가 적었고, 분명 같은 혹은 비슷한 코드가 사용되는데도 같은 코드를 그냥 '복붙'해서 썼다...
(그래...나도 알아요;;; 왜 그랬대..🙃🙃🙃)
그러다보니 불필요하게 코드가 길어졌고, 조금만 수정사항이 발생해도 여기저기 찾아다니면서 수정해야하는 번거로움도 덤으로 주어졌다.😐
이번 팀에서는 이렇게 중복되는 UI를 최대한 뽑아내려했고, 이를 공통 컴포넌트로 묶어서 효율성을 재고하고자 했다.
왜 필요해❓
1. 비슷한 UI 요소가 여러곳에서 사용된다면 이를 위해 공통 컴포넌트를 만들어 코드 중복을 줄일 수 있다.
2. 향후, 수정 또는 문제가 발생했을때 사용된 컴포넌트들을 돌아다닐 필요 없이 바로 공통 컴포넌트만 찾아가면 되니 유지보수에도 용이할 것이다.🫡
위 사진을 보면 공통 컴포넌트로 뽑아볼만한 입력창이 보인다.
그렇다! 그거다ㅋㅋ
그 중에서도 나는 제목, 태그 입력창을 맡았다.
✅ 작업을 하기에 앞서 내가 중점으로 생각한 것은 다음 2가지다.
1. 재사용성을 고려한 설계
2. 스타일과 기능을 분리하여 유지보수성 향상
👍 1번을 위해서는,
- 입력 필드마다 label, placeholder, value, 이벤트(onChange), 키 입력 이벤트(onKeyDown) 등을 다르게 줄 수 있도록 한다.
- 따라서 Props를 활용하여 다양한 상황에서도 유연하게 사용할 수 있도록 설계한다.
- required 여부에 따라 필수 입력 표시( * )를 동적으로 표시하도록 구현한다.
✌️ 2번을 위해서는,
- CSS 모듈을 사용하여 스타일을 컴포넌트 내부에서 독립적으로 관리한다.
- 기능적인 부분과 스타일적인 부분을 분리하여, UI 변경이 필요할 때 CSS 파일만 수정하도록 한다.
(사실 이 부분은 Module CSS를 사용하기에 자연스레 적용되었다!)
여기서 잠깐!
그냥 이러저러 해서 공통 컴포넌트를 만들었어요! 하지말고, 우리 개발자니깐 모듈화, 추상화와 같은 키워드를 활용해보자.
일단 뭔지부터 알아봐야겠다🤔
1. 모듈화(Modularization)❓ 어떻게 활용했는가❓
- 모듈화는 코드를 독립적인 단위(모듈)로 분리하여 재사용성과 유지보수성을 높이는 방법이다.
- 예를 들어, 여러 입력 필드에서 공통된 스타일과 로직을 반복적으로 사용하면, 코드가 중복되고 유지보수가 어려워진다.
- 이를 해결하기 위해 입력 필드를 하나의 독립적인 컴포넌트로 분리하여 여러 곳에서 재사용할 수 있도록 만들었다.
2. 추상화(Abstraction)란❓ 어떻게 활용했는가❓
- 추상화는 불필요한 세부 사항을 감추고 핵심적인 개념만 노출하는 방법이다.
- TitleTagInput 컴포넌트에서는 다양한 입력 필드에서 공통적으로 필요한 기능(label, placeholder 등)을 Props로 추상화했다.
- 이를 통해 다양한 입력 필드로 활용 가능하도록 했다.
위와 같이 코드를 작성해보았고, 프로젝트에 적용해보았다.
위 사진처럼 팀원들이 본인 작업간에 해당 컴포넌트를 사용해주었고, 최초 분석시 사용될 것으로 예상하지 못한 곳에서도 사용되었다.
내가 만든 컴포넌트가 6곳의 각기 다른 컴포넌트에서 사용되었다.
✨ 결과 및 효과 ✨
✅ 코드 중복 감소 → 비슷한 UI의 입력 필드를 여러 개 만들 필요 없다!
✅ 유지보수성 향상 → 디자인 변경 등 수정사항 발생 시 하나의 컴포넌트만 수정하면 된다!
✅ 코드 확장성 증가 → Props를 활용해 다양한 입력 필드로 활용 가능하다!
🌱 정리
좋은 코드를 지향하려면 중복되는 코드를 줄이는 것이 그 방법 중 하나일 것이다.
이번에 한 공통 컴포넌트 개발이 단순한 UI 요소 분리가 아니라,
모듈화와 추상화라는 개념을 인지하고 적용한 효과적인 컴포넌트의 설계였다고 생각한다.
