반복 속에서 드는 생각 - 인지 부하의 기준은 어디에 있을까

[raymondanythings]

테이블 화면을 작업하는 중에 문득 의문이 들었다.
작업한 화면은 좌측 상단에는 제목, 우측 상단에는 actions 요소, 그리고 하단에는 테이블로 구성되어 있었다.
모든 화면이 거의 같은 레이아웃을 가지고 있었고,
차이라고 해도 각 화면에서 사용하는 액션의 종류나 테이블 컬럼 구성과 view 형태가 조금씩 다른 정도였다.

각자의 역할이 잘 분리된 컴포넌트를 조합해 페이지를 구성했지만,
많은 페이지의 코드가 거의 같은 패턴으로 반복되고 있었다.
또한 searchParams를 이용해 필터링을 처리하면서
이를 하위 컴포넌트에 내려주려면 props drilling이 생기는 구조이기도 했다.

물론 컴포넌트의 depth가 3단계를 넘지 않았고,
무엇보다 서비스 자체의 중요도가 높지 않아 trade-off로 마무리했지만.
정리하며, 문득 다른 접근이 떠올랐다.

<TableContent /> 같은 컨테이너 컴포넌트를 만들어
페이지 구조 자체를 한 번 더 추상화했다면 어땠을까?

두 접근 방식 중 어느 쪽이 더 나은 선택일까?
인지 부하라는 관점에서 보면,
현재처럼 명시적으로 조합한 구조는 단순하고 직관적이지만,
반복되는 패턴을 매번 손으로 써야 한다는 피로감이 있다.
반면 컨테이너 컴포넌트는 한 번 익숙해지면 ‘하나의 틀 안에서’ 일관성 있게 사고할 수 있다. - 물론 외부에서 인터페이스 숙지에 부하가 따르긴 한다.

누군가는 명시적으로 조합된 구조가 더 편하다고 느낄 수도 있고,
누군가는 추상화된 형태가 더 안정감 있다고 생각할 수도 있다.

인지 부하라는 건 결국 개인의 익숙함과 맥락에 의존하는 걸까?
아니면 코드 구조나 추상화 수준에도 어느 정도 ‘절대적인 기준’이 존재할까?

[al-bur]

완전 똑같은 상황이고, 똑같은 고민을 해본 적이 있어서 공감되는 글이네용

저는 개인의 익숙함과 맥락에 조금 더 의존하지 않을까 생각하고 있긴해요... 거기서 코드가 얼마나 잘 작성됐냐에 따라 생소함을 익숙함으로 바꿀 수 있는 속도가 달라질거라 생각하고 있긴합니다

raymond님은 어떻게 생각하시나요?