어떻게 더 좋은 리액트 컴포넌트를 만들까요? - 확장 가능성 그리고 재사용성

글 소개

컴포넌트를 잘 만드는 방법은 너무도 많습니다. 그래서 그런지 언제부턴가 컴포넌트를 잘 만드는 방법이라면 의심부터 먼저 하게 됩니다.

하지만 이번에 소개해드릴 글은 아주 기본적인 것 부터 점검해보는 기회를 제공한다고 생각합니다.

그럼 천천히 살펴보겠습니다.

Bit을 사용하여 기본 UI 컴포넌트를 만들기

블로그를 보다보면 사용하는 기술에 대한 홍보(?)가 많아서 건너뛰는 편입니다. 그럼에도 이렇게 소개해드리는 이유는, Bit을 사용하는 이유에 대해선 짚어볼만 하다고 생각하기 때문입니다.

혹시 코드를 작성하면서, 특히 컴포넌트를 만들면서 다이어그램을 작성해보시나요?

(저도 복잡해질 가능성이 있는 그리고 많은 기능을 갖고 있는 컴포넌트는 위 이미지처럼 다이어그램을 그려보며 점검하곤 합니다.)

컴포넌트는 의존관계를 파악하기 수월하고 컴포넌트의 수가 많아지면 의존성 때문에 유지보수성이 떨어질 수 있기 때문에, 한 번 쯤은 컴포넌트 의존성 다이어그램을 그려보면 많은 도움이 됩니다. 컴포넌트 숲속을 헤매다가 숲을 보기 시작하면 얼마나 헤매고 다녔는지 확인할 수 있고, 개선 지점도 찾을 수 있습니다.

저자도 의존성 그래프를 그려보는 게 많은 도움이 된다고 어필하고 있습니다.

With Bit, you can use its dependency graph to understand how your components interact. It illustrates the interconnectedness of components.

This dependency graph is particularly beneficial in large-scale projects involving multiple teams. It aids in efficient change management, guaranteeing that updates within a scope are in sync and align with the broader organizational standards.

컴포넌트 API 노출하기

아마 많은 프론트엔드 개발자에게 API와 인터페이스는 백엔드 개발자의 전유물처럼 느껴질텐데요, 이 소주제를 통해 프론트엔드 개발자에게 API와 인터페이스는 어떤 걸 의미하는지 돌아볼 기회가 생깁니다.

내용은 아주 단순합니다. '컴포넌트와 그 컴포넌트의 인터페이스를 노출하라'

전 여기에 하나 더 붙이려고 합니다. '그 밖에 것은 노출할 때 주의하라'

테마 컴포넌트를 활용한 스타일 일관성을 위한 테마

페이지를 만들 땐 테마가 정말 중요합니다. 대부분 서비스의 경우 일정 테마를 갖고 있는데 이걸 일괄로 관리할 수 있어야 합니다.

To maintain a consistent look and feel, base components are designed to be themeable.

커스터마이징과 확장성 향상 시키기

컴포넌트의 커스터마이징과 확장성을 향상 시키는 방법을 공유합니다. 너무 단순하고 모두 아는 방법이지만 효과는 확실합니다. 'className'과 '구조 분해 할당' 사용하기 인데요, 원글을 보시면 단번에 이해할 수 있습니다.

마무리

좋은 말, 도움되는 말은 반복해서 듣고 새겨야하지 않을까 합니다. 이 외에 컴포넌트 분리 기준에 대해 제가 쓴 글도 남기는 걸로 마무리합니다 !