본문 바로가기

Web/React2

react 한글 입력 시 keydown 이벤트 중복 발생하는 문제 해결 컴포넌트를 개발하면서 겪은 문제를 해결한 과정을 남겨보려고 한다. 문제 input 요소에 값을 입력하고 'Enter' 키를 부모 컴포넌트에 보내주는 'keydown' 이벤트 핸들러를 등록했다. 영어, 숫자, 특수문자는 정상적으로 동작했지만 한글을 입력하면 이벤트 핸들러가 중복해서 동작하는 문제가 발생했다. 구글링을 해보면 이 문제의 해결 방법으로 대부분 keypress 이벤트를 사용하라고 나와있다. 하지만 keypress 이벤트는 공식적으로 deprecated 되었기 때문에 패스. 이름만 들어도 낯선 Web API composition event를 확인해서 문제의 원인을 찾을 수 있었다. 아래 예시는 MDN 공식 사이트에서 테스트 가능하다 한글은 기본적으로 합성 문자이기 때문에 자음이든 모음이든 comp.. 2022. 9. 21.
useEffect 활용 이 글은 React 공식 문서를 학습하며 정리하였습니다. React에서 useEffect는 useState로 선언한 상태 값이 변경될 때마다 호출되는 함수로, obserber 패턴으로 볼 수 있다. useEffect는 아래와 같은 명세를 가지는데 useEffect(effect, dependencies) 리액트 팀에서는 useEffect를 이렇게 설명하고 있다. you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM .. 2022. 9. 4.