mongtak
20
2020-09-18 14:04:21 작성 2020-09-18 14:05:24 수정됨
5
106

React 이벤트 위임 질문


javascript에서 최상위 태그에 이벤트를 등록하여

event.target.className 으로 하위 태그의 이벤트를 감지할수 있잖아요.

그래서 이벤트를 따로 하나하나 등록하지 않아서 메모리의 사용을 줄일수 있다고 알고 있습니다.


그러면  React에서도 위임을 사용하여 효율적으로 코드를 만들어 보고 싶어서 

React위임에 대하여 찾아보았지만 이벤트 등록 방법만 보였습니다.


React에서도 위임을 하여 이벤트를 처리하는것이 좋은것 인지,

또 코딩을 그런식으로 많이 하는지 궁금합니다.



0
  • 답변 5

  • 초보자1212
    1k
    2020-09-18 14:13:31

    리액트는 순수 자바스크립트와는 다르게 동작합니다.

    Synthetic Event System 이라는 내부 아키텍쳐가 존재해요

    그래서 핵심만 간단하고 짧게 말씀드리자면

    1. 리액트는 바닐라 자바스크립트랑 100% 동일하게 동작하지는 않는다. 그러나 일반적으로 그냥 onClick 으로 컴포넌트에 걸어서 하는 거라면 잘 된다.

    2. 리액트에서 위임은 상위 컴포넌트에 이벤트를. 걸고 거기서 위임에 대한 후속처리를 하시면 됩니다.


    자바스크립트와 리액트 모두 최상위에다가 전부 위임을 거시는건 안티패턴이니까 사용에 조심하세요.

  • 초보자1212
    1k
    2020-09-18 14:14:51

    게다가 리액트는 16버젼까지는 DOM element root 태그에 이벤트를 걸어버리지만 17버전부터는 리액트 컴포넌트 중에서 최상위에다가 이벤트를 거는것으로 바뀔 예정입니다.

    아무쪼록 최상위에는 되도록 걸지마시고 필요한 곳에 적절한 위치에 거시는게 관리측면에서도 편하실거에요.

  • mongtak
    20
    2020-09-18 14:23:40 작성 2020-09-18 14:28:07 수정됨

    아 저번에도 좋은답변 주셨는데 

    이번에도 좋은 답변 정말 감사합니다!!


    그럼 리액트에서 해당 태그에만 직접 이벤트를 하나씩 등록하는 것과

    절적한 위치의 컴포넌트나, 태그에 이벤트를 등록하여

    위임을 하는것은 코딩의 차이만 있을뿐 메모리 사용의 차이는 없다는 것인가요?

  • 초보자1212
    1k
    2020-09-18 14:56:15

    차이가 있어요

    제가 말씀드리는거는 뭐랑 더 가깝냐면

    자바스크립트는 id 나 class 를 가져와서

    addEventListener 로 넣는경우가 더 많겠죠 

    인라인으로 넣는건 옛날 기술이니까요 이제는

    근데 리액트는 달라요. addEventListener 로 하지 않으시는게 리액트의 국룰까진아닌데, 

    리액트에 대해서 빠삭하게 알고 있지 않은 상태에서는 저걸 사용하지마시고

    컴포넌트에

    <div onClick={}/>

    이런식으로하시는게 좋습니다

    이벤트 위임으로 얻을 수 있는 효과는 리액트든 바닐라든 똑같아요~

  • mongtak
    20
    2020-09-22 13:05:42

    프로젝트하다보니 확인을 너무 늦게 해버렸네요 ..

    좋은 답변 감사합니다!!!

  • 로그인을 하시면 답변 을 등록할 수 있습니다.