React Event - onFocus, onBlur


React Event - onFocus, onBlur

프로젝트를 진행하면서 input 태그에 작성한 value 값을 가져오는 일이 많았다. 이때 주로 onChange 이벤트를 사용해 value가 변할때마다 값을 가져왔는데 불필요한 호출이 많다고 생각이 들어 다른 이벤트를 찾아보았다. 그러던 중 JS에서 focusOut 이벤트가 react에서는 onBlur 이벤트로 사용하고 있다는 사실을 알게되어 focus와 blur의 차이점을 공부했다. onFocus 엘리먼트가 포커스 될 때 호출된다. ex) <input onFocus={() => console.log('focus'} /> onBlur 엘리먼트에서 포커스가 사라졌을 때 호출된다. ex) <input onBlur={() => console.log('blur'} /> 느낀점 항상 onChange를 사용해 input의 변화를 감지했는데 매번 이벤트가 호출돼 불필요하다는 생각이 들었었다. 하지만 onBlur 이벤트를 사용하니 input에서 나오면 value 값을 가져와 많은 호출을 줄일 수 ...


#input #inputvalue #JavaScript #onBlur #onFocus #React #value

원문링크 : React Event - onFocus, onBlur