[R09M App] CreateRoom 페이지 - .current.dataset 의 값을 읽어오지 못하는 이슈

[jellyjoji]

내용

PaymentToggleButton.jsx 에서 context 를 사용하여 데이터를 createRoomForm 으로 전달한뒤 createRoomForm.payment 로 불러와서 를 .current.dataset 로 data-payment={isToggled ? '계좌 이체' : '만나서 결제'} 를 호출하니 에러가 뜨며 dataset 을 읽어들이지 못합니다.

아래와 같이 토글버튼을 누르면 true와 false 값을 출력해내지만 dataset 을 찾지 못한다는 에러가 뜨씁니다. context 를 사용해서 불러온 createRoomForm.payment 값에 dataset 를 적용시켜 사용하려고 합니다.

.current.dataset 를 어느 부분에 적용시켜 dataset를 값으로 읽어올수가 있을까요?

import { AppContext } from '@/App';
import { useContext, useEffect, useState } from 'react';

function PaymentToggleButton({ value = "false", labelClassName, ...restProps }) {
  const { updateCreateRoomForm } = useContext(AppContext);
  const [isToggled, setToggled] = useState(value);

  useEffect(() => {
    updateCreateRoomForm('payment', isToggled);
    console.log(isToggled);
  }, [isToggled]);

  return (
    <>
      <label htmlFor="payment" className={labelClassName}>
        지불 방법
      </label>
      <div id="payment" className="bg-greenishgray-200 w-full p-2 rounded-lg">
        <button
          value={isToggled}
          type="button"
          className="w-full rounded-lg "
          onClick={() => setToggled(!isToggled)}
          data-payment={isToggled ? '계좌 이체' : '만나서 결제'}
          {...restProps}
        >
          <div
            className={`flex w-full ${isToggled ? 'items-center' : ''}`.trim()}
          >
            <div
              className={`w-1/2 ${!isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              만나서 결제
            </div>
            <div
              className={`w-1/2 ${isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              계좌 이체
            </div>
          </div>
        </button>
      </div>
    </>
  );
}

export default PaymentToggleButton;

다음은 토글 버튼의 UI 구현 부분에 대한 질문입니다.

<button
          value={isToggled}
          type="button"
          className="w-full rounded-lg "
          onClick={() => setToggled(!isToggled)}
          data-payment={isToggled ? '계좌 이체' : '만나서 결제'}
          {...restProps}
        >
          <div
            className={`flex w-full ${isToggled ? 'items-center' : ''}`.trim()}
          >
            <div
              className={`w-1/2 ${!isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              만나서 결제
            </div>
            <div
              className={`w-1/2 ${isToggled ? 'shadow-lg bg-white rounded-lg' : ''
                }`.trim()}
            >
              계좌 이체
            </div>
          </div>
        </button>

위의 토글 버튼의 마크업을 아래의 코드와 같이 개선시켜보았습니다.

코드를 조금 간결하게 만들수있었지만 반복되는 부분을 더 줄여줄수있을지 궁금합니다.

혹시 반복되는 w-1/2 ${isToggled ? 'shadow-lg bg-white rounded-lg' : ''} 이 css 부분을 더 줄여줄수있는 연산식이 있을지 여쭤봅니다! ``jsx <button type="button" className="w-full rounded-lg flex items-center" onClick={() => setToggled(!isToggled)} data-payment={isToggled ? '계좌 이체' : '만나서 결제'} {...restProps}

<div className={w-1/2 ${!isToggled ? 'shadow-lg bg-white rounded-lg' : ''}}> 만나서 결제

[jellyjoji]

문제 원인

React가 작동하는 기본적인 원리에 대한 이해와 응용 능력이 요구됩니다.

• 파생된 상태(derived state)
• useEffect 훅

문제 해결 가이드

• 파생된 상태와 사이드 이펙트를 사용하세요. (주석 참고)
• 웹 표준을 준수해주세요. <button> 내부에 <div> 사용할 수 없습니다. 대신 <span> 사용하세요.

import { AppContext } from '@/App';
import { useContext, useEffect, useState } from 'react';

function PaymentToggleButton({ value = false, labelClassName, ...restProps }) {
  const { updateCreateRoomForm } = useContext(AppContext);
  const [isToggled, setToggled] = useState(value);

    // 파생된 상태 (isToggle 상태에 의존한 값)
  const paymentMethod = isToggled ? '계좌 이체' : '만나서 결제';

    // isToggled 상태가 변경되면 폼 상태 업데이트
  useEffect(() => {
    updateCreateRoomForm('payment', paymentMethod);
  }, [isToggled]);

    // 버튼 내부에서 사용되는 활성 클래스 이름
  const activeClassNames = 'shadow-lg bg-white rounded-lg';

  return (
    <>
      <label htmlFor="payment" className={labelClassName}>
        지불 방법
      </label>
      <div id="payment" className="bg-greenishgray-200 w-full p-2 rounded-lg">
        <button
          value={isToggled}
          type="button"
          className="w-full rounded-lg flex items-center"
          onClick={(e) => setToggled(!isToggled)}
          data-payment={paymentMethod}
          {...restProps}
        >
          <span className={`w-1/2 ${!isToggled ? activeClassNames : ''}`}>
            만나서 결제
          </span>
          <span className={`w-1/2 ${isToggled ? activeClassNames : ''}`}>
            계좌 이체
          </span>
        </button>
      </div>
    </>
  );
}

export default PaymentToggleButton;