[React] 지나친 추상화 및 파일 분리 시 주의점

설명

평소 최대한 코드를 분리하여 각 코드/파일의 기능을 최소화하여 형태와 기능을 한눈에 파악할 수 있게 구성하는 방식으로 개발해왔는데

최근 코드 리뷰 중 지나친 추상화 및 코드/파일 분리로 오히려 로직의 흐름을 따라가기 힘들다는 조언을 받아 수정하면서 배운 내용을 정리하고자 한다.

주의점

1. 복잡한 구조로 인한 가독성 저하

지나치게 많은 파일과 추상화된 컴포넌트를 생성하면, 코드가 여러 레이어로 나뉘어 복잡해지며 직관적으로 요소의 스타일이나 기능을 파악하기 어려워지기 때문에 이해하는 데 오히려 시간이 많이 걸릴 수 있습니다. 예를 들어 작은 수정사항에도 여러 파일을 확인해야 할 수도 있습니다

2. 불필요한 코드 중복과 비효율성

모든 상황에 맞추어 사용할 수 있는 범용적인 컴포넌트를 만들려고 하면 실제로 필요 이상으로 복잡한 컴포넌트로 구성 되어 결국 비슷한 로직 혹은 불필요한 내용이 여러 컴포넌트에 중복될 수 있습니다. 또한 컴포넌트나 파일은 실제 사용하려는 상황에 딱 맞지 않아 오히려 추가적인 조정이 필요할 수 있는 비효율적인 상황이 생길 수 있습니다.

3. 디버깅 및 유지보수의 어려움

코드가 여러 레이어로 분리된 경우, 특정 컴포넌트의 스타일이나 기능을 수정할 때 연관된 파일을 모두 파악하기 어려워집니다. 예를 들어 작은 수정사항에도 여러 파일을 넘나들며 수정해야하는 번거로움이 발생할 수 있습니다.

4. 개발 속도 저하

단순한 작업이나 빠르게 구현할 수 있는 기능도 추상화의 복잡성 때문에 여러 파일을 작성하고 연결해야하므로 프로젝트 진행 중에는 추가되는 요구 사항에 따라 추상화 구조가 오히려 제약이 될 수 있습니다.

tailwind 사용 시 주의점

Tailwind 는 미리 정의된 유틸리티 클래스(예: bg-blue-500, text-xl)를 바로 적용하는 방식은 CSS 파일로 분리하거나, 스타일을 컴포넌트로 묶지 않아도 각 HTML 요소의 스타일이 코드 안에서 바로 드러나게 되어 각 요소의 스타일이 무엇인지 즉각적으로 파악할 수 있어 코드의 가독성이 높아지고, 유지보수가 쉬워지는 장점이 있습니다.

오히려 과도하게 컴포넌트 및 파일을 추상화해서 사용할 때 Tailwind 를 사용한다면 오히려 Tailwind 의 직관적인 가독성과 유연성등의 장점을 퇴색될 수도 있습니다.

※ 별개로 tailwind 를 공통적으로 사용해야 한다면 @apply 디렉티브를 사용하여 추상화하는 방식을 추천하고 있습니다.

결론

• react component 의 본래 의도에 맞게 현재 컴포넌트의 로직을 가능한 분리하지 않고 현재 컴포넌트에서 모두 처리하되 내용이 너무 길어져 가독성을 해친다면 hook 으로 기능을 분리 하거나 view 를 분리하는 방식을 차선책으로 선택
• component 설계 단계 및 초기 개발 단계에서 부터 로직 및 view 분리해서 개발하기보다 기능을 완전히 구성 후 가독성 향상을 위해 여러 방법을 선택