React 문제 해결: !important 추가 시 컴포넌트 재렌더링 문제
React 컴포넌트를 사용하다가 display: none !important를 사용할 때 컴포넌트가 예상대로 재렌더링되지 않는 문제를 겪고 있다면, 혼자가 아닙니다. 이 글에서는 이 문제를 조사하고 해결을 돕기 위한 해결책을 제공합니다.
문제점
간단한 React 컴포넌트가 있다고 가정해보겠습니다. 이 컴포넌트는 자식 컴포넌트를 숨기거나 보이게 하는 프롭을 받습니다. 이를 위해 display: none을 사용하여 style 속성을 사용합니다:
var style = {};
if (shouldHide) {
// 재렌더링 문제를 일으키지 않습니다
style = {
display: 'none'
};
}
return (
<span style={style} {...this.props} />
);
그러나 display: none !important를 사용하여 스타일 선언을 더 구체적으로 만들려고 할 때, 컴포넌트가 새로운 프롭을 받을 때 더 이상 재렌더링되지 않습니다:
// 재렌더링 문제를 일으키지 않습니다
style = {
display: 'none !important'
};
원인 설명
이 문제는 현재 React에서는 !important를 지원하지 않기 때문에 발생합니다. display: none !important 스타일 선언의 사용으로 인해 컴포넌트는 프롭의 변경 사항을 제대로 감지하지 못하고 재렌더링이 발생하지 않습니다.
React는 실제로 프롭이나 상태에 변경이 있는 경우에만 컴포넌트를 재렌더링합니다. 이 경우에는 display: none !important와 같은 스타일 객체가 동일한 상태로 유지되므로 React는 재렌더링이 필요하지 않다고 가정합니다.
임시 방편
이상적이지는 않지만, 단순한 임시 방편을 사용하여 원하는 결과를 얻을 수 있습니다. style 대신 CSS 클래스를 적용하는 방식으로 변경해보세요:
CSS 파일에 다음을 추가하세요:
.hidden {
display: none !important;
}
컴포넌트에 다음과 같이 적용하세요:
var hideClass;
if (shouldHide) {
hideClass = "hidden";
}
return (
<span className={hideClass} {...this.props} />
);
이 접근 방식은 shouldHide 프롭에 따라 hidden 클래스를 추가하거나 제거합니다. 그런 다음 hidden 클래스에서 특정한 display: none !important 규칙을 처리하여 !important을 인라인 스타일에 직접 사용하지 않고 재렌더링 문제를 해결합니다.
이 임시 방편을 적용하면, 컴포넌트는 이제 shouldHide 프롭이 변경될 때 올바르게 재렌더링되어 원하는 동작을 제공합니다.
결론
React에서 인라인 스타일에 !important를 사용하면 컴포넌트 재렌더링 문제를 일으킬 수 있지만, CSS 클래스 기반 접근 방식으로 이 문제를 해결할 수 있습니다. 이 글에서 논의한 임시 방편을 적용함으로써, React 컴포넌트를 올바르게 재렌더링하면서 원하는 숨기기/표시 기능을 달성할 수 있습니다.
