Redux와 함께 Named Exports를 사용하여 쉽게 리팩토링하는 방법
이 블로그 포스트에서는 Redux와 함께 이름이 지정된 내보내기(named exports)의 사용과 connect 함수를 사용할 때 이름이 지정된 내보내기를 사용할 수 없는 문제를 해결하는 방법에 대해 논의하겠습니다.
문제
JavaScript에서 이름이 지정된 내보내기에 익숙하다면, Redux와 connect 함수를 다룰 때 왜 이름이 지정된 내보내기를 간단히 사용할 수 없는지 궁금할 수 있습니다.
다음과 같은 코드에서:
class Something extends Component { ... }
export default connect(mapStateToProps)(Something);connect 함수가 컴포넌트를 Redux 상태에 매핑해야하기 때문에 export 키워드를 클래스 자체에 배치할 수 없는 것으로 보입니다.
해결책 1: 상수 사용
이 제한을 해결하는 한 가지 방법은 컴포넌트를 상수에 할당하고 해당 상수를 내보내는 것입니다:
class Something extends Component { ... }
export const ConnectedSomething = connect(mapStateToProps)(Something);이제 이름이 지정된 내보내기를 사용하여 연결된 컴포넌트를 가져올 수 있습니다:
import { ConnectedSomething } from './...';해결책 2: 별개의 컴포넌트 생성
또 다른 접근 방식은 다른 클래스 이름을 가진 별개의 컴포넌트를 생성하고 연결된 고차 컴포넌트(HOC)를 원하는 이름으로 내보내는 것입니다. 다음은 예시입니다:
class SomethingComponent extends Component { ... }
export const Something = connect(mapStateToProps)(SomethingComponent);이름이 지정된 내보내기를 사용하여 연결된 컴포넌트를 원하는 결과를 얻을 수 있습니다.
해결책 3: 인덱스 파일 사용
컴포넌트를 별도의 파일로 구성하는 것을 선호하는 경우, 인덱스 파일을 사용하여 명칭 충돌 없이 연결된 컴포넌트를 내보낼 수 있습니다. 다음은 방법입니다:
폴더 안에 index.ts 파일을 생성하고 거기에서 컴포넌트를 내보내세요:
export { default as SomethingComponent } from './SomethingComponent.tsx';SomethingComponent.tsx 파일에서 컴포넌트를 평소처럼 정의하세요:
class SomethingComponent { ... }
export default SomethingComponent;이제 연결된 컴포넌트를 가져와야 하는 다른 컴포넌트에서 인덱스 파일의 이름이 지정된 내보내기를 사용할 수 있습니다:
import { SomethingComponent } from '[폴더]';결론
connect 함수로 인해 Redux에서 이름이 지정된 내보내기를 직접적으로 사용할 수 없는 것처럼 보일 수 있지만, 이러한 문제를 해결할 수 있는 여러 가지 해결책이 있습니다. 연결된 컴포넌트를 상수에 할당하거나 별개의 클래스 이름을 가진 별도의 컴포넌트를 생성하거나 인덱스 파일을 사용함으로써 Redux 애플리케이션에서 이름이 지정된 내보내기를 효과적으로 사용할 수 있습니다.
이러한 해결책은 유연성과 리팩토링의 편의성을 제공하여 Redux 구현을 최대한 활용할 수 있게 해줍니다.
참고 자료 :
https://stackoverflow.com/questions/54449350/named-exports-with-redux
같은 카테고리의 다른 글 보기 :
