/**unfinished*/ e.target.value

the Other Object·2023년 3월 6일
0
  • DOM요소에만 이벤트 설정
  • div, button, input 등에는 이벤트를 설정할 수 있지만 컴포넌트에는 이벤드를 설정할 수 없다.
<MyComponent onClick={} /> 이라면,
  MyComponent 에 onClick 이라는 Props를 전달하는 것

* react는 이벤트를 처리하기 위해 바날라js와 달리 Element가 렌더링 뙬 때 이벤트리스너를 제공해 이벤트를 처리한다.
* 모든 속성은 이벤트 핸들러가 호출된 다음 초기화된다. 따라서 비동기적으로 이벤트 객체에 접근할 수 없다.
* 핵심 : react 에서 Element의 이벤트를 처리하기 위해 제공하는 eventListener의 인자 e(event)가 매번 초기화 된다.
* 하지만 : onSubmit함수가 실행되면서 렌더링이 초기화되는 것을 막기위해 e.preventDefault(); 를 추가한다.
* e.persist()는 onClick, onChange 등에만 사용할 수 있고 렌더링이 초기화 되는 것을 해결한다기 보다는 이벤트 객체의 속성값이 null이 되는 문제를 해결하는데 사용된다.

const anyFunction = useCallback((event) => {
  setTimeout(() => {
    console.log(event);
    
    // 위의 경우에 대해 event에 값이 안에서 조회할 수 있는 속성(Property)이 null값을 가진다
    // 즉, render->commit->event가 초기화된다.
  }, 3000)
})

0개의 댓글