“#shadow-root” 노드를 사용하여 사라지는 React SVG 아이콘 문제 해결하기

React SVG 아이콘이 왜 사라지나요?

React SVG 아이콘이 컴포넌트를 다시 렌더링 할 때 무작위로 사라지는 귀찮은 문제가 발생하는 경우, 걱정하지 마세요. 이 예기치 않은 동작은 꽤 혼란스럽지만, 다행히도 이러한 문제를 해결하기 위한 방법이 있습니다.

이 문제의 이해

해결 방법에 대해 알아보기 전에, 우선 이 문제가 발생하는 이유를 이해해봅시다. devtools를 사용하여 DOM 트리를 검사할 때 “#shadow-root”라는 노드가 계층 구조에 있는 것을 알 수 있습니다. 이 노드는 컴포넌트를 렌더링하는 데 중요한 역할을 합니다. SVG 아이콘이 보일 때는, 그들은 “#shadow-root” 요소의 자식 노드로 배치됩니다. 그러나 그들이 사라지면, DOM 트리는 “#shadow-root” 노드가 더 이상 어떠한 자식 노드도 가지고 있지 않음을 보여주며, SVG 아이콘이 어디에도 없어지는 것입니다.

가능한 해결책

1. 대안적인 접근 방식 시도하기

가능한 해결책 중 하나는 React 컴포넌트에서 SVG 아이콘을 포함하는 다른 방법을 시도해보는 것입니다. xlinkHref와 함께 인라인 SVG를 사용하는 대신 다른 접근 방식을 탐색해보세요:

import logo from './logo.svg';

render() {
    return (
        <img src={logo} className="App-logo" alt="logo" />
    );
}

import InlineSVG from 'svg-inline-react';

const svgSource = `<svg xmlns="......</svg>`;
<InlineSVG src={svgSource} />

2. SVG 요소 수동으로 구성하기

다른 방법으로는 xlinkHref 속성에 의존하는 대신에 SVG 요소를 수동으로 구성하는 것입니다. 다음은 예시 구현입니다:

const Icon = React.memo(({ name }) => {
  const [svgNode, setSvgNode] = React.useState(null);

  React.useLayoutEffect(() => {
    if (svgNode === null) {
      return;
    }

    const useNode = document.createElementNS("http://www.w3.org/2000/svg", "use");
    useNode.setAttributeNS("http://www.w3.org/1999/xlink", "href", `img/icons/sprite.svg#icon-${name}`);
    svgNode.appendChild(useNode);

    return () => {
      useNode.remove();
    };
  }, [name, svgNode]);

  return <svg ref={setSvgNode} />;
});

마무리

React SVG 아이콘이 사라지는 문제는 해결하기 귀찮은 문제일 수 있지만, 다른 가져오기 방법을 사용하거나 SVG 요소를 수동으로 구성하는 것과 같이 대안적인 방법을 시도함으로써 이 문제를 극복할 수 있습니다. DOM 트리의 구조와 “#shadow-root” 노드의 역할을 이해하는 것을 기억하세요. 문제 해결과 실험을 통해 React 애플리케이션에서 사랑스러운 SVG 아이콘의 가시성을 유지할 수 있습니다.

이 문제를 해결하는 데 행운을 빕니다! 즐거운 코딩하세요!

참고 자료 : 

reactjs