(초보)react 관련으로 질문 드립니다.

조회수 722회

이미지

안녕하십니까

자바를 공부한 신입개발자입니다.

react 에 관심이 생겨 조금씩 보고 있는데 궁금한 점이 생겼습니다

react 로 프론트를 구성해서 위와 같이 버튼과 이벤트를 처리하는 함수를 만들었습니다.

yarn start 로 실행을 해서 버튼을 클릭해서 alert 창 확인하고 동작을 잘해서 페이지 소스를 확인해보니

저 함수부분이 아무리 찾아도 보이지 않아 질문 드립니다.

분명 정적 html에서 자바스크립트가 있어야 동적처리가 가능하다 라고 알고 있는데 페이지 상에서는

click 만 확인이 되고 onClick 속성도 안보입니다..

react에서는 webpack을 사용해서 component를 babel-loder가 해서 bundle.js를 생성해 자바스크립트를 묶어서 가져온다고 배워서 크롬 개발자모드 소스로 bundle.js 를 확인했는데 해당 이벤트를 처리해주는 함수가 보이지 않습니다.

저 함수는 어디에 숨어있고 어떻게 버튼 이벤트 처리를 감지하는지 알고 싶습니다.

조언 부탁드리겠습니다

  • (•́ ✖ •̀)
    알 수 없는 사용자

1 답변

  • React는 virtual DOM을 사용하고 있습니다.

    저기 return값으로 넣은 HTML 태그 같이 생긴 JSX들은 실제 DOM tree안에 노출되기도 하지만 React 내부적으로 관리하고 있습니다. (모든 JSX태그가 그런건 아니지만) 실제 렌더링 되는 DOM(이하 real DOM)과 매핑되어 있다고 보시면 이해가 쉽습니다.

    이벤트도 native DOM event로 바로 걸지 않고 내부적으로 감지하여 처리됩니다. 때문에 onClick을 JSX에 inline으로 명시했지만, 이는 실제로 react 내부적으로 처리되고 real DOM에는 보이지 않습니다. 대신 real DOM에는 외부에서 발생한 click이벤트를 내부에 dispatch 할 수 있도록 처리를 한 HTMLElement를 노출시킵니다.

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)