TIL - 각 컴포넌트 폴더에 index.js 파일을 두는 이유

오늘은 React 프로젝트에서 Redux Toolkit을 활용하여 모달 컴포넌트 폴더에 index.js 파일을 두는 것이 얼마나 컴포넌트를 효과적으로 관리하는지 학습했습니다.

 

index.js 파일의 정의와 역할

index.js 파일은 해당 폴더 내의 파일들을 한 곳에서 import 및 export할 수 있게 해주는 모듈화된 엔트리 포인트입니다.

이를 통해 프로젝트 구조를 더 깔끔하고 조직적으로 유지할 수 있습니다.

 

index.js 활용의 주요 장점

1. 편리한 모듈화: 여러 모달 컴포넌트를 각각 import할 필요 없이, index.js를 통해 한 번에 import할 수 있습니다. 이렇게 하면 코드 작성 시 import 구문이 간결해지고, 필요한 모달 컴포넌트를 더 쉽게 사용할 수 있습니다.
2. 중앙 집중 관리: 모든 모달 컴포넌트를 한 파일에서 관리하여 코드베이스가 더 깔끔하고 체계적으로 유지됩니다. 컴포넌트 수정이나 추가 시에도 index.js만 업데이트하면 되어 유지보수가 용이합니다.
3. 확장성: 새로운 모달 컴포넌트를 추가하거나 기존 컴포넌트를 수정할 때, 각 컴포넌트 파일과 index.js만 업데이트하면 됩니다. 이로 인해 프로젝트의 확장성이 높아지고, 관리가 수월해집니다.

 

모달 컴포넌트 폴더 구조 및 코드 예시

src/
├── components/
│   ├── modals/
│   │   ├── AlertModal.js
│   │   ├── ConfirmModal.js
│   │   ├── InputModal.js
│   │   ├── Modal.styled.js
│   │   └── index.js
└── redux/
    ├── slices/
    │   └── modalSlice.js
    └── store.js

 

index.js

import React from 'react';
import { useSelector } from 'react-redux';
import AlertModal from './AlertModal';
import ConfirmModal from './ConfirmModal';
import InputModal from './InputModal';

const MODAL_COMPONENTS = {
  'ALERT_MODAL': AlertModal,
  'CONFIRM_MODAL': ConfirmModal,
  'INPUT_MODAL': InputModal
};

const ModalRoot = () => {
  const { modalType, modalProps } = useSelector(state => state.modal);

  if (!modalType) {
    return null;
  }

  const SpecificModal = MODAL_COMPONENTS[modalType];
  return <SpecificModal {...modalProps} />;
};

export default ModalRoot;

 

modal.slice.js

import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  modalType: null,
  modalProps: {}
};

const modalSlice = createSlice({
  name: 'modal',
  initialState,
  reducers: {
    openModal: (state, action) => {
      state.modalType = action.payload.modalType;
      state.modalProps = action.payload.modalProps;
    },
    closeModal: (state) => {
      state.modalType = null;
      state.modalProps = {};
    }
  }
});

export const { openModal, closeModal } = modalSlice.actions;
export default modalSlice.reducer;

 

store.js

import { configureStore } from '@reduxjs/toolkit';
import modalReducer from './slices/modal.slice';

const store = configureStore({
  reducer: {
    modal: modalReducer,
    // 다른 리듀서 생략
  }
});

export default store;

 

모달을 사용하는  컴포넌트 

import React from 'react';
import { useDispatch } from 'react-redux';
import { openModal } from './redux/slices/modalSlice';
import ModalRoot from './components/modals';

const SomeComponent = () => {
  const dispatch = useDispatch();

  const handleOpenAlert = () => {
    dispatch(openModal({
      modalType: 'ALERT_MODAL',
      modalProps: { message: '메시지 입력' }
    }));
  };

  const handleOpenConfirm = () => {
    dispatch(openModal({
      modalType: 'CONFIRM_MODAL',
      modalProps: {
        message: '동의 하시겠습니까?',
        onConfirm: () => alert('확인')
      }
    }));
  };

  const handleOpenInput = () => {
    dispatch(openModal({
      modalType: 'INPUT_MODAL',
      modalProps: {
        prompt: 'Enter your name:',
        onSubmit: (input) => alert(`내용입력, ${input}!`)
      }
    }));
  };

  return (
    <div>
      <button onClick={handleOpenAlert}>Alert Modal 열기</button>
      <button onClick={handleOpenConfirm}>Confirm Modal 열기</button>
      <button onClick={handleOpenInput}>Input Modal 열기</button>
      <ModalRoot />
    </div>
  );
};

export default SomeComponent;

 

결론

오늘 배운 내용을 통해 index.js 파일을 활용하면 코드의 모듈화, 중앙 집중 관리, 확장성을 향상시킬 수 있다는 것을 알게 되었습니다. 이러한 접근 방식은 특히 Redux Toolkit과 같은 상태 관리 라이브러리와 함께 사용하면 코드의 유지보수성과 가독성을 높일 수 있ㅇ습니다.