index 파일에서 export 하는 방식

[jindonyy]

현재 Slider 컴포넌트 파일이 커져 파일을 분리하려고 합니다.
파일을 모두 분리하고 index 파일의 원래 용도에 맞게 폴더 내 파일들을 import 해와서 export 하려고 하는데요.
이렇게 하게 될 경우 다음과 같은 에러가 뜹니다.

때문에 새로운 객체로 복사를 해서 export 해야하는데요.
아래 3가지 중에 고민입니다.

1. 현재 Silder컴포넌트를 SliderWrap으로 변경하여 index에서 Slider를 생성 후 export 한다.
   -> SliderWrap이라는 이름의 컴포넌트가 생긴다..

// index.tsx
import SliderWrap from '@components/common/Slider/SliderWrap';
import SlideList from '@components/common/Slider/SlideList';
...

const Slider = Object.assign(SliderWrap);
Slider.List = SlideList;
Slider.Item = Slide;
Slider.PrevButton = PrevButton;
Slider.NextButton = NextButton;

export default all;

2. export default 하기 때문에 다른 곳에서 import 할 때 지정한 이름이 아니여도 된다. 때문에 아래처럼 all로 export하여 import 할 때 Slider로 import 한다.
   -> 해당 기능 때문에 export default를 지양해야 한다는 주장도 있습니다. (export default를 쓰지 말아야 할 이유)

// index.tsx
import Slider from '@components/common/Slider/Slider';
import SlideList from '@components/common/Slider/SlideList';
...

const all = Object.assign(Slider);
all.List = SlideList;
all.Item = Slide;
all.PrevButton = PrevButton;
all.NextButton = NextButton;

export default all;

3. 그냥 index 파일을 Slider 컴포넌트로 사용한다.
   -> 객체를 복사하지 않고 현재 Slider 컴포넌트에 속성으로 사용할 수 있다.

// index.tsx
const Slider = ({ options = defaultOptions, children }: SliderProps) => {
  ...
});

Slider.List = SlideList;
Slider.Item = Slide;
Slider.PrevButton = PrevButton;
Slider.NextButton = NextButton;

개인적으로는 그냥 기존처럼 index 파일에 Slider 컴포넌트를 쓰고 프로퍼티로 사용할 컴포넌트들만 분리하면 어떨지.. 싶은데 어떻게 생각하시나요?
다른 의견이 있다면 더 알려주심 감사하겠습니다.

그리고 또 의견을 듣고 싶은 건 Slider 파일을 분리한 이유가 '파일이 커서'인데요.
파일이 크다라는건 주관적이라고 생각해서(물론 몇 줄 이상일 경우 분리하자 정할 수 있지만) 파일 분리의 기준 중 하나를 크기로 두는게 좋은지도 의문이 드네요. 전부 분리하자 말자로 정하면 오히려 불편하다고 생각하는지 의견을 듣고싶습니다!

[hemudi]

저는 개인적으로 파일을 분리했을때 index 파일은 딱 분리한 파일을 모아서 export 해주는 용도로 쓰는게 깔끔한 것 같아 1번이나 2번 방식이 좋은 것 같아요.
1번이나 2번은 네이밍의 차이가 있는 것 같은데 all 은 확실히 아무리 import 하는 곳에서 변경이 가능하다 해도 너무 특색이 없는 느낌인 것 같네요. all 말고 다른 네이밍을 하거나 1번 방식으로 가도 좋을 것 같아요.
1번 방식에서 Slider의 파일명이나 원본 컴포넌트 이름이 바뀌는게 고민 되신다면 말씀해주신 것 처럼 import 할 때 이름을 바꿀 수 있으니 Slider 를 파일명은 그대로 Slider 로 두고 import 해올때 SliderWrapper 또는 SliderRoot, SliderCore 이런 식으로 가져오고 새로 생성하는 객체의 이름을 Slider로 두는건 어떨까 싶네요!

// index.tsx
import SliderRoot from '@components/common/Slider/Slider';
import SlideList from '@components/common/Slider/SlideList';
...

const Slider = Object.assign(SliderRoot, {
   List: SlideList,
   Item: Slide,
   PrevButton,
   NextButton,
});

export default Slider ;

그리고 Object.assign을 쓰신다면 객체를 합치는 방식을 Object.assign 메서드 하나로 끝낼 수 있게 위처럼 구현해도 괜찮을 것 같아요!

파일 분리는 오늘 주간 회의에서 의견 나눈 것처럼 가독성, 한 파일에서 이해해야 할 것이 많은가 적은가, 한 파일이 너무 많은 기능을 담고 있지는 않은가 를 기준으로 판별해도 좋을 것 같아요.

[healtheloper]

이 의견에 99% 동감합니다.
아예 Root 로 감싸줘야 하는 애가 있다면 Root 로 쓰게끔 인터페이스를 작성하는 것도 좋을 것 같아요.
그렇게 하기로 결정한다면 전체적으로 공통된 인터페이스를 작성할 수 있게끔 정리하긴 해야겠어요

+) Object assign 으로 안하면 오류나나요?

const Slider = {
  Root : SliderRoot,
  Item: Slider,
  ...
}

[jindonyy]

+) Object assign 으로 안하면 오류나나요?

넵 지난 번 파크가 알려주신 stackoverflow 방식 참고해서 했는데 얕은 복사라 똑같은 오류가 나더라구요ㅠ_ㅠ
Root라는 프로퍼티를 추가하면

<Slider.Root>
  <Slider.List>
    ...

이런식으로 해야하는데 분리하지 않는 다른 headless 컴포넌트는 Root를 붙이지 않고 쓰고있으니..
햄디가 제안한 방식처럼 (export 이름을 다른 이름으로 해오는건 별로지만.. 컨벤션을 저희끼리 정해서 잘지키면 되지 않을까해서)
컴포넌트를 분리할 경우에만 root 컴포넌트를 ComponentRoot로 이름을 바꿔 import 해오는걸로 정하면 되지 않을까 싶어요!

// index.tsx
...
import SlideList from '@components/common/Slider/SlideList';
import SliderRoot from '@components/common/Slider/Slider';

const Slider = Object.assign(SliderRoot, {
  List: SlideList,
  Item: Slide,
  PrevButton,
  NextButton,
});

export default Slider;

<Slider>
  <Slider.List>
    ...