230821 개발일지 TIL - React에서 Ant Design Modal 이름 충돌 문제 해결

React에서 Ant Design Modal 이름 충돌 문제 해결

코드를 작성하는 도중에 React 프로젝트에서 Ant Design의 Modal을 사용하면서 이름 충돌 문제가 발생할 수 있다.

import React, { useState } from 'react';
import { Row, Col, Button, Modal } from 'antd';
import { ReactComponent as Profile } from '../../../../assets/images/admin/profile.svg';

const Modal = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      <Row justify="center" align="middle" style={{ padding: '20px 0' }}>
        <Col span={24} style={{ textAlign: 'center' }}>
          <Profile />
          <div style={{ margin: '20px 0 10px' }}>크왕이다.</div>
          <Button
            onClick={() => {
              setModalVisible(true);
            }}
          >
            내 정보 수정하기
          </Button>
        </Col>
      </Row>
      <Modal
        title="내 정보 수정"
        centered
        open={modalVisible}
        onCancel={() => {
          setModalVisible(false);
        }}
        footer={null}
      >
        {/* 모달 내용 */}
      </Modal>
    </>
  );
};

export default Modal;

문제 상황
React 프로젝트에서 Ant Design의 Modal을 사용하면서 커스텀 Modal 컴포넌트도 생성하려는 상황에서 이름 충돌 문제가 발생한다. 이는 같은 이름의 컴포넌트를 동시에 사용하려고 하기 때문에 발생하는 문제이다.

해결 방법
1. 커스텀 Modal 컴포넌트 이름 변경: 커스텀 Modal 컴포넌트의 이름을 변경하여 충돌을 피할 수 있다. 예를 들어, ProfileModal과 같이 이름을 변경할 수 있다.
2. Ant Design Modal 별칭 사용: antd 라이브러리에서 Modal을 가져올 때 별칭을 사용하여 충돌을 피할 수 있다. 예를 들어, import { Modal as AntdModal } from 'antd';와 같이 사용한다.

import React, { useState } from 'react';
import { Row, Col, Button, Modal as AntdModal } from 'antd';
import { ReactComponent as Profile } from '../../../../assets/images/admin/profile.svg';

const ProfileModal = () => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <>
      <Row justify="center" align="middle" style={{ padding: '20px 0' }}>
        <Col span={24} style={{ textAlign: 'center' }}>
          <Profile />
          <div style={{ margin: '20px 0 10px' }}>크왕이다.</div>
          <Button
            onClick={() => {
              setModalVisible(true);
            }}
          >
            내 정보 수정하기
          </Button>
        </Col>
      </Row>
      <AntdModal
        title="내 정보 수정"
        centered
        visible={modalVisible}
        onCancel={() => {
          setModalVisible(false);
        }}
        footer={null}
      >
        {/* 모달 내용 */}
      </AntdModal>
    </>
  );
};

export default ProfileModal;

위와 같은 방법으로 커스텀 Modal 컴포넌트 이름을 변경하거나, Ant Design Modal을 별칭으로 가져와서 이름 충돌 문제를 해결할 수 있다.

이렇게 하면 React 프로젝트에서 Ant Design의 Modal을 사용하면서 이름 충돌 문제를 간단히 해결할 수 있다.