컴포넌트를 분리하는 기준과 방법

리액트 컴포넌트를 분리하는 기준은 무엇일까?

화면을 보고 어떤 부분을 묶어 컴포넌트로 만들면 좋을지 정리한 경험이 있으신가요?

이 주제에 대해서는 디자인과에서 UXUI 수업을 들으며 직접 디자인을 할 때에도 항상 고민해왔었는데, 우선하는 부분이 무엇인지에 따라서 분리하는 기준이 다 달랐던 것 같아요.

클라이언트 프로그래밍을 하시다 보면 디자인 시스템이라는 용어가 익숙하실 것 같은데,

디자인 시스템은 왜 있어야 하고 어떤 식으로 정의되는지 확인하기 좋은 영상입니다!

참고하시면 좋을 것 같네요,

[2019 Spectrum con] 강수영, 정희연 | 토스 플랫폼 디자이너 : 4,000시간을 절약해준 디자인 시스템

그렇다면 리액트를 이용한 웹 클라이언트 개발에서의 컴포넌트는 어떻게 분리되어야 할까요?

디자인 파트나 타 파트에서 컴포넌트들을 설계해서 넘겨준다면 명세대로 제작하면 되겠지만, 동작이 비효율적이라거나 직접 컴포넌트를 나눠야 할 때에는 다음과 같은 것들을 고려할 수 있을 것 같아요.

• 단일 책임 원칙

• 재사용성

• 가독성

• 유지보수성

• 성능 최적화

• 테스트 용이성

아토믹 디자인?

디자인 패턴 중 아토믹 디자인은 디자인, 클라이언트단에서 많이 차용되고 있는 방법론입니다. 모든 것이 원자로 구성되어 있고 또 이들이 결합해서 분자가 되고 더 복잡한 유기체가 되고…

이런 식으로 더이상 분해할 수 없게 역할을 쪼갠 것들을 조립해 하나의 페이지를 구성하는 방식입니다.

하지만 아토믹 디자인을 나누는 단위은 주관적이고 상황에 따라 변할 수 있을 것 같은데요,

아토믹 디자인을 활용한 디자인 시스템 도입기 | 카카오엔터테인먼트 FE 기술블로그

해당 블로그에서 이 부분을 해결하려고 한 경험이 있어 읽어보시면 좋을 것 같아요.

정리하자면 molecule(분자 단계) 는 원자로 구성되며 단일 책임 원칙에 따라 한가지의 책임을 지고, organism은 atom molecule organism으로 구성되어 레이아웃을 기준으로 나눌 수 있는 영역을 가지게 합니다.

컴포넌트에 컨텍스트가 있는 경우 organism으로, 컨텍스트 없이 단일책임원칙을 지킬 수 있는 경우 molecule로 작성합니다. 이후 코드리뷰를 통해 적절하게 구분하고 적용하는 단계를 거칩니다.

(요즘은 피그마가 발전해서 디자이너가 더 섬세하게 컴포넌트 설정을 해줄 수 있답니다)

디자인 시스템이 존재하는 상태라면 디자이너와의 긴밀한 협업으로 컴포넌트 이름과 단위를 통일해주는 것을 통해 커뮤니케이션 비용을 절감할 수 있겠네요!

컴포넌트 분리가 중요한 이유는 무엇일까?

다음과 같은 화면들이 있을 때, 컴포넌트로 사용할 수 있는 요소들에는 어떤 것들이 있을까요? 인풋 박스나 제목/내용 단락, 버튼들이 비슷한 형태나 기능을 가지고 있는 것 같네요!

재사용성

코드가 뒤죽박죽 섞여 있거나 분리가 제대로 안 되어 있다면, 같은 형태나 기능을 하는 코드를 이미 짜두었더라도 필요한 곳에 바로 적용하기가 힘들어요.

잘 분리하면 동일한 기능이나 UI를 여러 곳에서 재사용해서, 개발 시간도 단축시키고 코드 중복도 줄일 수 있어요.

위 화면에서 버튼을 한번 만들었다고 했을 때 버튼이 등장하는 모든 화면에서 UI를 재사용할 수 있겠죠!

확장성

갑자기 라우팅 역할만 하던 버튼이 누르면 모달을 띄우는 역할을 하게 수정해야 한다면?

재사용을 하지 않았을 경우 직접 그 버튼을 구현했던 모든 페이지를 돌아다니면서 모달을 띄우는 기능을 추가해줘야 할 거예요. 하지만 컴포넌트를 잘 분리해서 적용했다면 그 컴포넌트 파일만 조금 수정해주면 요구사항을 쉽게 만족시킬 수 있겠네요!

가독성

위 페이지를 보면, 한 페이지에 들어가야 하는 정보와 UI가 정말 많은 걸 볼 수 있어요. 이 모든 것들을 한 파일에 작성하다 보면 코드가 몇백줄이 되고 몇천줄이 되는 모습을 흔하게 볼 수 있답니다.

코드가 너무 길어지면 나중에 다시 보거나 다른 사람이 코드를 보았을 때 어떤 역할을 하고 어떻게 동작하는지 알기가 어려워요. 컴포넌트를 잘 분리해서 코드 길이를 적당하게 유지하면 가독성을 향상시킬 수 있답니다.

공통으로 사용되는 컴포넌트, 페이지 혹은 용도별로 사용되는 컴포넌트로 나누어 폴더를 정리하고 관리하면 필요한 컴포넌트의 위치를 즉각적으로 알 수 있겠네요!

성능 최적화

위와 같은 화면을 컴포넌트를 분리하지 않고 만들었다고 했을 때, 상태가 변화하면 화면 전체를 다시 렌더링해서 새로운 정보를 표시해야 할 거예요.

하지만 컴포넌트가 분리된 상태에서 변화가 있는 부분만 리렌더링한다면 cost 가 줄어들게 되겠죠!

테스트 용이성

프론트엔드에서도 코드가 정상적으로 동작하는지 알아보기 위해 테스트를 진행하는데요, 먼저 유닛 테스트와 통합 테스트에 관해 알아볼까요?

💡 유닛 테스트

단일 함수, 메소드 또는 컴포넌트의 동작 테스트

개별 함수 또는 메소드의 입출력을 검증해 예상된 동작 확인!

테스팅 프레임워크 / 라이브러리

Jest, Mocha, Jasmine, React Testing Library, Enzyme

💡 통합 테스트

여러 컴포넌트 간 상호작용이나 서로 다른 부분 간의 통합 동작 테스트

사용자 시나리오에 따라 어플의 전반적인 동작 검증!

테스팅 도구

Cypress, Selenium, Puppeteer

만일 컴포넌트를 분리하지 않았다면, 제작한 기능이 잘 동작하는지 테스트하기 위한 비용이 많이 들 거예요. 한 기능을 테스트하고 싶은데 분리되지 않아 다른 기능과 함께 동작하는 경우 등을 생각해볼 수 있겠죠

컴포넌트를 기능별로 잘 분리했다면 하나의 컴포넌트가 잘 동작하는지 테스트하는 유닛 테스트를 진행해 예상된 동작과 일치하는지 확인이 용이해요!

여러 컴포넌트가 함께 잘 동작하는지 테스트하는 통합 테스트를 통해서 문제가 있는 컴포넌트를 바로 알아내고 수정하기에도 용이할 거예요