[React] Component들의 rendering 순서와 event capture/bubble

1. 리액트 부모/자식간의 렌더링 순서 2. 부모 자식 관계 컴포넌트들의 이벤트 전파 를 테스트하면서 공부한 것들을 정리했습니다.

렌더링 순서

Depth1, Depth2, Depth3 총 3 개의 컴포넌트들을 Depth1 > Depth2 > Depth3 으로 구조를 짜고 렌더링 로그와 devTool에 컴포넌트가 어떻게 찍히는 지 확인해봤다.

코드

import './App.css';
import {Helmet} from "react-helmet";
import Depth1 from './render-order/depth1';

function App() {
  return (
    <div className="App">
      <Helmet htmlAttributes={{ lang: 'ko'}}>
        <title>study</title>
      </Helmet>
      <Depth1 />
    </div>
  );
}

export default App;

----
import Depth2 from './depth2';

const Depth1 = () => {

  console.log('Depth 1 render')
  return (
    <>
      <div>I'm Depth1</div>
      <Depth2 />
    </>
  )
}

export default Depth1;

-----
import Depth3 from './depth3';

const Depth2 = () => {
  console.log('Depth 2 render')
  return (
    <>
      <div>I'm Depth2</div>
      <Depth3 />
    </>
  )
}

export default Depth2;
---
const Depth3 = () => {
  console.log('Depth 3 render')
  return (
    <>
      <div>I'm Depth3</div>
    </>
  )
}

export default Depth3;

컴포넌트 렌더링 devTool

렌더링 순서는 부모 → 자식 App → Depth1 → Depth2 → Depth3 로 나타난다.

Event Bubbling / Capturing

case 1) depth1, depth2, depth3 에 onclick 이벤트 붙인 경우 이벤트 버블링 (event bubbling) 관찰

function App() {
  return (
    <div className="App">
      <Helmet htmlAttributes={{ lang: 'ko'}}>
        <title>study</title>
      </Helmet>
      <Depth1 />
    </div>
  );
}

export default App;

----
import Depth2 from './depth2';

const Depth1 = () => {

  console.log('Depth 1 render')
  return (
    <div onClick={() => console.log('depth 1 log')}>
      <div>I'm Depth1</div>
      <Depth2 />
    </div>
  )
}

export default Depth1;

-----
import Depth3 from './depth3';

const Depth2 = () => {
  console.log('Depth 2 render')
  return (
    <div onClick={() => console.log('depth 2 log')}>
      <div>I'm Depth2</div>
      <Depth3 />
    </div>
  )
}

export default Depth2;
---
const Depth3 = () => {
  console.log('Depth 3 render')
  return (
    <div onClick={() => console.log('depth 3 log')}>
      <div>I'm Depth3</div>
    </div>
  )
}

export default Depth3;

위 코드를 실행하고 Depth3 과 Depth2 를 클릭하면 다음 이미지처럼 이벤트 버블링 (event bubbling)이 일어난다.

depth 3 클릭했을 때

depth 2 클릭했을 때

case 2) depth1 context 에서 onclick 함수 만들고 depth 2로 상속시키는 경우 이벤트 버블링

import Depth2 from './depth2';

const Depth1 = () => {

  console.log('Depth 1 render')
  const handleOnClick = () => {
    console.log('depth 1 log')
  };


  return (
    <div onClick={handleOnClick}>
      <div>I'm Depth1</div>
      <Depth2 onClick={handleOnClick} />
    </div>
  )
}

export default Depth1;

---
import Depth3 from './depth3';

const Depth2 = (props) => {
  console.log('Depth 2 render')
  return ( 
    <div onClick={() => props.handleOnClick}> // depth 1에서 상속시켰다.
      <div>I'm Depth2</div>
      <Depth3 />
    </div>
  )
}

export default Depth2;

---
const Depth3 = () => {
  console.log('Depth 3 render')
  return (
    <div onClick={() => console.log('depth 3 log')}>
      <div>I'm Depth3</div>
    </div>
  )
}

export default Depth3;

react_event_3

depth3 을 클릭하면, 이벤트 버블링이 되어 depth2의 props.handleOnClick 이 실행되고, 위 이미지처럼 depth1 log 가 찍힌다. 이벤트 버블링은 document 객체를 만날 때까지 onClick 이벤트를 만날때마다 동작한다.

case 3) depth1,2,3 에서 모두 이벤트 캡쳐링 걸고 클릭한 경우

import Depth2 from './depth2';

const Depth1 = () => {

  console.log('Depth 1 render')
  const handleOnClick = () => {
    console.log('depth 1 log')
  };


  return (
    <div onClick={handleOnClick} onClickCapture={() => console.log('depth 1 capture log')}>
      <div>I'm Depth1</div>
      <Depth2 />
    </div>
  )
}

export default Depth1;

---
import Depth3 from './depth3';

const Depth2 = (props) => {
  console.log('Depth 2 render')
  return (
    <div onClick={() => console.log('depth 2 log')} onChange={() => console.log('depth2 onChange')} onClickCapture={() => console.log('depth 2 capture log')}>
      <div>I'm Depth2</div>
      <Depth3 />
    </div>
  )
}

export default Depth2;

---
const Depth3 = () => {
  console.log('Depth 3 render')
  return (
    <div onClick={() => console.log('depth 3 log')} onClickCapture={() => console.log('depth 3 capture log')}>
      <div>I'm Depth3</div>
    </div>
  )
}

export default Depth3;

위 코드는 depth1, depth2, depth3 에 bubble 되는 click 과 capture 되는 click 을 두개씩 모두 건 상태이다. 여기서 depth3 을 클릭하면 다음과 같이 로그가 찍힌다.

react_event_4

먼저 depth1 → depth2 → depth3 순으로 이벤트가 캡쳐링 되고, depth3 → depth2 → depth1 순으로 이벤트가 버블링된다.

그럼 depth1 에서 캡쳐링 코드를 제거하고 depth3 을 클릭하면 어떻게 될까?

react_event_5

캡쳐링을 걸어둔 depth2 부터 캡쳐링 이벤트가 아래로 전파된다. 아직 버블링 클릭 이벤트는 depth1 에 남아있는 상태여서 버블링 이벤트는 3 → 2 → 1 순으로 전파된다.

그럼 depth 2 에서만 캡쳐링 코드를 제거하고 depth3 을 클릭하면 어떻게 될까?

react_event_6

캡쳐링을 안 걸어둔 depth 2 를 건너 뛰고 1 → 3 으로 갔다가 3 → 2 → 1 순으로 이벤트가 버블링된다.