F&F, Components 재사용에 대한 고민과 경험

Seokho·2022년 2월 22일
0

F&F 인턴

목록 보기
2/2

글을 쓰는 이유

F&F에서 인턴을 하며 가장 유익한 고민이었다고 생각하는 컴포넌트에 대한 내용을 기록한다! 인턴십을 통해 컴포넌트에 대한 이해도가 조금(?) 상승했는데, 그 이유는 적극적으로 고민하고 프로젝트 중반에 느낀 불편함을 잘 캐치한 덕분이라고 생각한다. 하지만 아직 멀었어..

고민의 시작

Components 재사용에 대한 불편함

프로젝트를 진행하기 전 팀회의를 통해 각자 R&R을 미리 정하고 시작했는데, 나의 역할은 사진과 같다. 특히, 이번 프로젝트에서 컴포넌트에 대해 추가 학습하며 더 깔끔한 코드를 작성하고 싶었다.

미리 공통 컴포넌트를 작업하여 공유한 후 내가 맡은 페이지를 진행했다. 이전 프로젝트에서의 실수를 반복하지 않기 위해 rebase, pull을 주제별로 하고 버전과 초기 세팅을 수시로 확인했으며, 각자 구현한 페이지를 다같이 보며 미팅을 진행했다.

프로젝트 진행 중 흥미로웠던 것 중 하나는 생각하지도 못한 파트에서 재사용 가능한 컴포넌트가 필요했다는 점이다. 우리는 프로젝트를 시작 전 어떠한 공통 컴포넌트가 필요할지부터 고민했고, 각자 맡은 컴포넌트를 먼저 구현 후 페이지를 진행했다.
그럼에도 불구하고 작업을 하다보니 Title의 반복이 눈에 거슬렸다. 특히 받아오는 API에 따라 보여지는 페이지마다 Title이 달랐는데 이 부분은 결국 공통 컴포넌트 Page Title 로 만들어 공유했다. 현업에서도 예상하지 못한 반복되는 부분은 중간에 공통 컴포넌트로 만들지 않을까? 라는 흥미로운 생각을하며 프로젝트를 진행했다.

하지만 프로젝트 중반쯤 불편함을 느끼기 시작했다. 페이지를 구현하기전에 만들어놓은 버튼 컴포넌트가 가지각색으로 사용되고 있었기 때문이다.

고민의 흔적

응? 근데 공통 컴포넌트를 미리 만들었는데? 재사용 가능한 컴포넌트를 만드는 이유가 모두의 편리성과 일관성있는 프로젝트의 진행을 위함 아닌가? 라는 의문이 들기 시작했다. 더불어 나는 디자이너 경력이 있었기에 스타일가이드까지 만들어 공유하며 레이아웃과 컬러, 폰트 등 디자인 가이드까지 진행했었는데, 전부 통일되지 않게 진행되고 있었다....

내가 잘못알고 있는 지식이 있을 수 있다는 생각에 바로 팀원들에게 불편함을 공유하지 않고, 컴포넌트의 재사용에 대한 학습을 시작했다.

코드의 재사용이 왜 필요할까?

너무나도 고전적인 주제이지만, 모든 기술은 어떤 문제의 solution으로 나온것이니, 다시 짚어보았다.

코드 재사용의 장점으로 첫번째, 구현할때 시간과 리소스를 절약할 수 있다. 두번째, 중복성을 줄일 수 있다. 똑같은 코드를 여러번 작성하지 않음으로 시간과 리소스를 절약하는 것은 너무나도 당연하다.

중복성을 줄이면 무슨 이점이 있을까?

만약 재사용하는 코드를 update하면, 해당 코드를 재사용하는 모든 곳에서 해당 update가 적용된다. 이런 일관성은 프로그램의 유지 및 보수를 쉽게 한다.

React에서 재사용을 위한 기술은?

React에서 코드 재사용을 위한 기술은 여러가지 있다. 대표적으로 컴포넌트 합성(composition)과 고차 Component, Custom Hook이다.

React의 컴포넌트는 그 자체로 다른 컴포넌트에서 import 되어 재사용할 수 있다. 또는 고차원 함수(hooks에서는 Custom Hook)의 형태로 state 관리 로직으로 그대로 재사용할 수 있다. 아니면 합성을 통해서도 쉽게 재사용 될 수도 있다.

결국은..

추가 학습 후 재사용 컴포넌트의 필요성을 확실히 알게되었기 때문에 내가 느끼는 불편함을 팀원들과 미팅하며 공유했다.

하지만 결국 해결되지 못했다. 물론 개개인의 역량의 차이때문일수도 있지만, 이번 경우는 조금 다르다고 생각한다. 시간이 갈수록 각자의 스타일에 맞게 컴포넌트가 변형되었다. 버튼 컴포넌트를 다같이 신나게 재사용하다 보니 페이지마다 다른 색상과 다른 props를 사용해야 했고, props를 너무 다양하게 받아오게 되어 관리측면에서 어려움을 느꼈다.

결론적으로 모든곳에서 사용 가능한 컴포넌트를 만들었지만 관리에 실패한것이다. 이를 통해 리액트가 재사용성을 매우 중요하게 생각하지만, 프로젝트의 모든 컴포넌트를 재사용 가능하게 만들수는 없을 것이고 그렇게 하면 안된다고 생각이 들었다.
그 이유는 간단한데, 관리가 매우 힘들어지기 때문이다. 점점 프로젝트의 규모가 커지다 보면 재사용 가능한 컴포넌트를 많이 사용하게 될텐데, 많이 사용할 수록 유지보수가 힘들어서 적당하게 맞는 부분만 사용할 수 있도록 해야된다고 느꼈다.

이러한 시행착오를 통해 사실 이전보다 머리가 더 복잡해졌다. 기능과 페이지를 기준으로 컴포넌트를 분류하고, 공통 컴포넌트를 만들어 가독성 좋은 코드를 작성하면 된다고 생각했었는데, 그렇게 단순한 문제가 아니었다. 재사용성에 대해 더 고민해보고, React에서 재사용을 위한 기술에 대해 추가 학습을 하며 최선의 방법을 찾아봐야겠다는 생각이 들었다.

아이고 머리야.. 😵‍💫

profile
같이의 가치를 소중하게 생각하는, 프론트엔드 개발자 이석호 입니다.

0개의 댓글