Iuput 태그에서 일부분만 마스킹하기

화면을 개발하는 도중 유저의 첫번째 아이디만 제외하고 전부 마스킹을 해달라고 했다.

정확한 오더는 아래와 같다.

1. 유저가 입력할 때는 입력하는 내용이 보여야한다.
2. 유저가 다른 곳을 클릭하면 첫글자를 제외한 나머지는 마스킹을 해야된다.
3. 유저가 아이디를 수정하면 리셋을 해야된다.

위 내용과 같이 코드를 구현하는데, 한번 해두면 두고 두고 쓸 것 같아서 메모를 해둔다.

확실히 리액트는 이것저것 코드들을 좀 정리를 해두어야하는데, 너무 귀찮다.

const [userId, setUserId] = useState('');
const [maskingUserId, setMaskingUserId] = useState('');

const handleChangeUserId = (id) => {
  setUserId(id);
  setMaskingUserId(id);
};

const onUserIdReset = () => {
  setUserId('');
  setMaskingUserId('');
};

return (
  <div>
    <input
      type="text"
      placeholder="아이디 입력"
      onClick={() => {
        onUserIdReset();
      }}
      onBlur={() => {
        setMaskingUserId(maskingId?.replace(/(?<=.{1})./gi, '*'));
      }}
      onChange={(e) => {
        handleChangeUserId(e.target.value);
      }}
      value={maskingUserId}
    />
  </div>
);