Autocomplete

RegExp() constructor

RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용하는 정규 표현식 객체를 생성

/pattern/flags
new RegExp(pattern[, flags])
RegExp(pattern[, flags])

매개변수

• pettern
  정규 표현식을 나타내는 텍스트
• flag
  정규 표현식에 추가할 플래그
  g, i, m등 어떤 패턴을 사용해 테스트를 판별할지 설정을 한다

RegExp 생성

/ab+c/i
new RegExp(/ab+c/, 'i') // 리터럴
new RegExp('ab+c', 'i') // 생성자

Autocomplete에서 사용

const filterRegex = new RegExp(value, 'i');
// filterRegex 변수에 RegExp를 설정하여 담는다
const resultOptions = deselectedOptions.filter((option) =>
  option.match(filterRegex)
);
// filter를 사용하여 deselectedOptions배열의 요소와 filterRegex와 일치 여부를 확인한다

처음에 for문과 filter를 사용하여 이래저래 만저보았지만 문제가 많았다

let filtering = options.filter(el => {
      for (let i = 0; i < el.length; i++) {
        if (el[i] === value) {
          return el
        }
      }
    })
    setOptions(filtering)

문제
한글 인식을 못한다
일회성 찾기 만 가능 ..

ClickToEdit

React onBlur 사용

onBlur
onBlur 이벤트 핸들러는 엘리먼트 (또는 자식 엘리먼트)에서 포커스가 사라졌을 때 호출된다
예를 들어, 유저가 포커스된 텍스트 인풋의 바깥 영역을 클릭했을 때 호출된다

function Example() {
  return (
    <input
      onBlur={(e) => {
        console.log('Triggered because this input lost focus');
      }}
      placeholder="onBlur is triggered when you click this input and then you click outside of it."
    />
  )
}

MDN 정규표현식과 RegExp, React focus이벤트에 대하여 정리