React flushSync를 이용한 포커스 관리로 완벽한 접근성 제공하기

function SimpleComponent() {
  const [show, setShow] = useState(false);
  const inputRef = useRef(null);

  const handleClick = () => {
    setShow(true);
    inputRef.current?.focus(); // 이 시점에서 input은 아직 DOM에 없습니다!
  };

  return (
    <div>
      <button onClick={handleClick}>Show Input</button>
      {show && <input ref={inputRef} placeholder="Focus me!" />}
    </div>
  );
}

const handleClick = () => {
  setShow(true);
  setTimeout(() => {
    inputRef.current?.focus();
  }, 10); // 마법의 숫자에 의존하는 불안정한 해결책
};

import { flushSync } from 'react-dom';

function ReliableComponent() {
  const [show, setShow] = useState(false);
  const inputRef = useRef(null);

  const handleClick = () => {
    flushSync(() => {
      setShow(true);
    });
    // 이 시점에서 DOM이 확실히 업데이트되어 있습니다
    inputRef.current?.focus();
  };

  return (
    <div>
      <button onClick={handleClick}>Show Input</button>
      {show && <input ref={inputRef} placeholder="Always focused!" />}
    </div>
  );
}

function EditableText({
  initialValue = '',
  fieldName,
  inputLabel,
  buttonLabel
}) {
  const [isEditing, setIsEditing] = useState(false);
  const [value, setValue] = useState(initialValue);
  const inputRef = useRef(null);
  const buttonRef = useRef(null);

  const startEditing = () => {
    flushSync(() => {
      setIsEditing(true);
    });
    inputRef.current?.select(); // 텍스트 전체 선택
  };

  const finishEditing = (newValue) => {
    flushSync(() => {
      setValue(newValue);
      setIsEditing(false);
    });
    buttonRef.current?.focus(); // 원래 버튼으로 포커스 복귀
  };

  if (isEditing) {
    return (
      <form onSubmit={(e) => {
        e.preventDefault();
        finishEditing(inputRef.current?.value ?? '');
      }}>
        <input
          ref={inputRef}
          type="text"
          aria-label={inputLabel}
          name={fieldName}
          defaultValue={value}
          onKeyDown={(e) => {
            if (e.key === 'Escape') {
              finishEditing(value); // 변경사항 취소
            }
          }}
          onBlur={(e) => {
            finishEditing(e.currentTarget.value);
          }}
        />
      </form>
    );
  }

  return (
    <button
      ref={buttonRef}
      aria-label={buttonLabel}
      onClick={startEditing}
    >
      {value || 'Click to edit'}
    </button>
  );
}