개발자도구 Element 탭 강조 표시의 기준

개발자도구에서 엘리멘트 탭을 열어보면 리렌더링 될 때마다 자주색으로 번쩍이는 부분을 볼 수 있어요.

 

이와 비슷하게 React Dev tools를 사용하면 Highlights 기능이 존재하긴 하는데, 이는 함수형 컴포넌트의 재호출(리렌더링)을 표시해주는 것일 뿐이지 실제 DOM 요소의 변경을 온전히 반영하는 것은 아닙니다. 즉, DOM 요소의 변경을 Highlights 기능이 전부 포함하여 반영되지만, 모든 리렌더링 자체를 개발자도구가 강조 표시를 하며 나타내지는 않습니다. 당연하죠. 원천을 따르는건 개발자 도구 쪽이고, 리액트는 그 위에서 도는 거니까요.

 

여튼 오늘은 개발자도구의 Element 탭 강조 표시를 톺아보는 시간을 가져보도록 하겠습니다. 

그 전에, 오늘 설명에 활용할 코드를 보여드릴게요.

export default function App() {
  const [isReverse, setIsReverse] = useState(false);
  const [isPrimary, setIsPrimary] = useState(false);

  return (
    <div
      className="App"
      style={{
        width: "500px",
        height: "500px",
        display: "flex",
        flexDirection: "column",
        gap: "1rem",
      }}
    >
      <div aria-label={isReverse ? "some-key" : "some-keysss"}></div>
      <Input key={isReverse ? "some-key" : null} />
      <Input key={!isReverse ? "some-key" : null} />
      <input />
      <div>ocahs9</div>
      <div key={"fixed"}>{isReverse ? "참" : "거짓"}</div>

      <Button setIsReverse={setIsReverse} />

      {isPrimary ? (
        <UserProfile key="active-profile" userId={123} role="primary" />
      ) : (
        <UserProfile key="active-profile" userId={456} role="secondary" />
      )}

      <button
        style={{ width: "100px", height: "100px" }}
        onClick={() => setIsPrimary((prev) => !prev)}
      >
        toggle
      </button>
    </div>
  );
}

 

---

1. 자식 요소의 '추가, 삭제, 재정렬' 의 경우에는 부모 요소도 강조 표시가 나타난다.

위에서 첫번째 토글 버튼을 누르면, input 요소의 key가 서로 바뀝니다. 이걸 리액트에서는 위치(포지션)이 변했다고 판단하고, 둘의 위치를 바꾸는데 이로 인해 부모요소인 div 요소도 번쩍이는 걸 볼 수 있죠.

 

반면 아래의 토글 버튼을 누르면, div의 그 어떤 자식 요소도 없어지거나 위치를 변경하지 않습니다. 

따라서 div요소는 강조 표시가 일어나지 않는 것을 볼 수 있습니다.

 

---

 

2. 특정 DOM 요소의 속성만 바뀔 경우, 해당 속성 부분에만 강조 표시가 나타난다.

이 경우에는, 속성이 isReverse 값에 따라 aria-label 속성 값이 달라집니다. 

  <div aria-label={isReverse ? "some-key" : "some-keysss"}></div>

 

그럼 위와 같이 속성 부분에서만 강조표시가 되는 것을 볼 수 있어요.

 

반면, 아래의 경우를 봅시다.

  <div aria-label={isReverse ? "some-key" : null}></div>

 

속성이 사라질 때는 div 자체에 강조 표시가 되고,

 

 

속성이 추가(변경)될 때는 속성값에만 강조 표시가 됩니다. 

 

이를 통해 속성값이 삭제되는 것이 아닌, 추가 혹은 변경의 경우에는 속성값 부분에만 강조표시가 된다는 것을 알 수 있습니다.

 

---

 

3. 부모요소의 텍스트 값이 변하는 건 속성값이 아니라 자식요소가 삭제되고 추가되는 과정이다.

종종 오해할 수 있는데, 부모요소의 텍스트값은 textElement, 즉 요소입니다.
따라서 해당 값이 변하는 것은 요소가 삭제되고, 새로운 요소가 추가되는 것이에요.

      <div key={"fixed"}>{isReverse ? "참" : "거짓"}</div>

 

key 값 존재 여부는 상관 없이, isReverse 값에 따라 텍스트요소는 "참" 혹은 "거짓" 으로 변합니다. 

이로 인해 자식요소의 추가 및 삭제가 반복적으로 일어나고, 부모 요소인 div에도 강조 표시가 일어나게 됩니다.

 

---

 

4. Input 요소의 경우에는 그 어떤 부분도 변하지 않더라도, 리렌더링 시 강조 표시가 일어나기도 한다. 

<Input key={isReverse ? "some-key" : null} />
<Input key={!isReverse ? "some-key" : null} />
<input />

 

위의 2가지 요소는 속성이 사라지고 다시 생긴다고 해도, 토글 버튼을 눌렀을 때 맨 마지막의 <input/> 요소 만큼은 강조 표시가 되지 않아야할 것 같은데요, 사실 input 요소에는 강조 표시 여부가 보장되진 않습니다. 

 

제가 테스트해본 codesandbox 환경에서는 항상 input도 같이 번쩍였고

 

다른 배포 환경, 로컬 환경등에서는 오직 속성만 번쩍였어요.

 

값을 입력을 하든, 리렌더링을 하든 마찬가지였습니다. 아마 원인을 추측건데, 개발자도구의 옵션이나 브라우저 버전이 다르거나, 리액트의 버전이 다른 것이 이런 차이를 만들어내지 않았나 예상합니다. 정확한 원인은 모르겠습니다. 

---

 

당장 활용할 경우는 적지만, 그냥 궁금해서 탐구해봤습니다. 

굳이 용도를 찾아보자면... 나중에 디버깅할 때 유용하게 사용할 수도 있겠네요.