qkreltms

function App() {
  const [message, setMessage] = useState('')
  const getSomething = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const { files } = event.target

    const data = new FormData()
    data.append('test', files[0])
    const res = await axios.post('http://localhost:3333', data).then(({data}) => data)
 setMessage(res.message)

qkreltms

export default function confirm(config: ModalFuncProps) {
  const div = document.createElement('div');
  document.body.appendChild(div);
  // eslint-disable-next-line no-use-before-define
  let currentConfig = { ...config, close, visible: true } as any;

  function render({ okText, cancelText, prefixCls, ...props }: any) {
    /**
 * https://github.com/ant-design/ant-design/issues/23623

qkreltms

// 이제 원하는 컴포넌트에 Provider로 액션을 전달하고 원하는 때에 액션을 dispatch 하면 됩니다. 
    <ProfileModalProvider>
      <RootComponent />
    </ProfileModalProvider>

qkreltms

// 모바일 앱이지만, 웹과 비슷합니다.
//우리의 modal 컴포넌트가 있는 곳입니다. 웹에 비유하면 App.jsx 위치쯤이라 보면 됩니다.

function RootNavigator(): ReactElement {
  const navigation = useNavigation();
  const { state } = useProfileContext();
  const modalEl = useRef(null);
  // 컨텍스트에 modal ref를 주입해줍니다.
 state.modal = modalEl;

qkreltms

const initialState: State = {
  user: {
    id: '',
    nickname: '',
    photoURL: '',
    statusMessage: '',
  },
  deleteMode: false,
  // ref를 주입받을 modal state입니다.

qkreltms

<!-- 트리거 버튼을 누르면 아래의 모달 컴포넌트가 디스플레이됩니다. -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  // ...

qkreltms

나의 Modal 컴포넌트 진화과정

목차

1. Bootstrap에서 배우다. - CSS 활용하기
2. Hackatalk에서 배우다. - Context API를 이용해서 global하게 쓰기
3. Ant-design에서 배우다. - ReactDOM.render() 3.1. 예제

---

1. Bootstrap에서 배우다. - CSS 활용하기

qkreltms

export interface WithWarnConfig
  extends Factory,
    Pick<ConfirmProps, "title" | "message"> {}

export const withWarn = (config?: WithWarnConfig): ConfirmProps => {
  return {
    ...config,
    contents: (onClickClose, onClickOk, contentMessage) => (
 &lt;&gt;

qkreltms

import { confirm, destroyAll } from "./myModal";
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        type="button"
 onClick={() =&gt; {

qkreltms

export const confirm = (config: ConfirmDialogProps) =>
  factory({ ...config, Component: ConfirmDialog });