IT & Mobile

DatePicker 팝업 안에 '날짜 모름'을 추가하려면 DatePicker 컴포넌트를 커스텀하여 팝업 내부에 체크박스를 추가해야 합니다. 이를 위해 react-datepicker의 CustomInput prop을 사용하여 커스텀 인풋을 만들고, 해당 인풋이 클릭되었을 때 팝업이 열리도록 조정할 수 있습니다. 아래는 그 예시입니다.

import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';

const CustomDatePicker = () => {
  const [selectedDate, setSelectedDate] = useState(null);
  const [dateUnknown, setDateUnknown] = useState(false);

  const handleDateChange = (date) => {
    setSelectedDate(date);
    setDateUnknown(false);
  };

  const toggleDateUnknown = () => {
    if (dateUnknown) {
      setSelectedDate(null);
    }
    setDateUnknown(!dateUnknown);
  };

  const CustomInput = React.forwardRef(({ value, onClick }, ref) => (
    <div>
      <input
        type="text"
        value={value}
        onClick={onClick}
        ref={ref}
        readOnly
      />
      <label>
        <input
          type="checkbox"
          checked={dateUnknown}
          onChange={toggleDateUnknown}
        />
        날짜 모름
      </label>
    </div>
  ));

  return (
    <DatePicker
      selected={selectedDate}
      onChange={handleDateChange}
      dateFormat="yyyy-MM-dd"
      placeholderText="날짜 선택"
      customInput={<CustomInput />}
    />
  );
};

export default CustomDatePicker;

기본사용법

https://jiyumi00.tistory.com/54 

커스텀 수정 예제:

https://velog.io/@oo009pbh/react-datepicker-%EC%BB%A4%EC%8A%A4%ED%85%80-%ED%95%98%EC%97%AC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

커스텀 input 예제: 

https://velog.io/@bnb8419/React-Datepicker-%EC%82%AC%EC%9A%A9%EB%B2%95-1znalwg3

css 스타일링으로 세로 text출력.

https://hanbbistory.tistory.com/59

1. 고차 컴포넌트 (Higher-Order Component, HOC) 사용: GTM 스크립트를 포함한 컴포넌트를 만들고, 이 컴포넌트로 각 페이지나 레이아웃을 감싸서 GTM 스크립트를 한 번만 로드하도록 할 수 있습니다.
2. 컨텍스트 (Context) 사용: React의 컨텍스트를 활용하여 GTM 스크립트를 한 번만 로드하고, 각 컴포넌트에서 이벤트를 트리거할 수 있습니다.

import React from 'react';

const addGTMScript = () => {
  const script = document.createElement("script");
  script.innerHTML = `
    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');
  `;
  document.head.appendChild(script);
};

const withGTM = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      addGTMScript();
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

const LoginButton = () => {
  const handleLoginClick = () => {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'login'
    });
  };

  return (
    <div>
      <button onClick={handleLoginClick}>Login</button>
    </div>
  );
};

const LoginButtonWithGTM = withGTM(LoginButton);

const LoginPage = () => {
  return (
    <div>
      <h1>Login Page</h1>
      <LoginButtonWithGTM />
    </div>
  );
};

export default LoginPage;