[트러블 슈팅] styled-components 오류 (표준, 비표준 속성)

발생한 오류 🔥

import { useState } from "react";
import styled from "styled-components";

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.borderColor};
  margin: 20px;
`;

function App() {
  return (
    <>
      <StBox borderColor={boxColor}>
        박스
      </StBox>
    </>
  );
}

오류

예제를 테스트해 보는 과정에서 `it looks like an unknown prop "borderColor" is being sent through to the DOM, which will likely trigger a React console error.` 오류가 발생했습니다.

 

해석하면 "알 수 없는 prop borderColor가 DOM을 통해 전송되는 것 같습니다. 이로 인해 React 콘솔 오류가 발생할 가능성이 높습니다."라는 오류였습니다.

 

 

해결 과정 🔎

styled-components: API Reference

 

해당 오류를 styled-components 공식 문서에서 서치 해 본 결과 스타일이 적용된 요소에서 사용될 `props`가 React 노드나 DOM 요소에 렌더링이 되는 걸 방지해 주기 위해 발생하는 오류였습니다.

 

 

해결 방법 ✨

React 노드로 전달되거나 DOM 요소에 렌더링 되는 것을 방지하기 위해 prop 이름 앞에 달러 기호($)를 접두사로 붙여서 일시적인 prop으로 변경해 DOM에 렌더링 되는 걸 방지했습니다.

import { useState } from "react";
import styled from "styled-components";

const StBox = styled.div`
  width: 100px;
  height: 100px;
  border: 1px solid ${(props) => props.$borderColor};
  margin: 20px;
`;

function App() {
  return (
    <>
      <StBox $borderColor={boxColor}>
        박스
      </StBox>
    </>
  );
}

 

 

이후 확인해 본 결과 오류가 사라진 것을 확인할 수 있었습니다.

오류 사라짐

 

DOM에도 `bordercolor` 속성이 렌더링 되지 않는 걸 확인할 수 있습니다.

bordercolor 속성

 

 

어려웠던 점 ❓

React는 <div> 태그에 유효한 HTML 속성이 아닌 `borderColor`와 같은 비표준 속성이 첨부되면 경고한다는 내용에 대해서 이해하기 살짝 어려웠던 것 같습니다.

 

깨달은 점 ❕

Attribute와 Property의 차이

표준과 비표준 속성에 대해 검색해 보면서 Attribute와 Property 차이에 대해 알게 되었습니다.

둘은 html 요소에 대한 속성을 가리키지만,

 

`속성(Attribute)`은 HTML 안에서 쓰이는 엘리먼트의 추가적인 정보를 의미(HTML 문서 내에 있기에 정적)

`프로퍼티(Property)`는 DOM 객체 내부의 속성을 의미(DOM객체는 js로 다루기 때문에 동적)

 

✨비표준 속성의 충돌을 방지하기 위한 방법✨

 

❗`data-* 속성` 사용하기

html에 data-를 붙여 개발자설정속성(=비표준속성)으로 안전하게 사용이 가능하고 data-로 시작하는 속성 전체는 개발자가 용도에 맞게 사용하도록 별도로 예약이 되고, dataset이라는 프로퍼티에 저장되어 DOM을 이용해 접근이 가능하게 됩니다.

 

transient props

이번에 적용한 방식은 비표준 속성 오류를 `transient props` 방식을 이용해 해결을 했고 `destructure props` 방식, `data-*`속성을 이용해 해결할 수 있다는 점에 대해 알게 되었습니다.

 

❗자세한 내용은 아래 링크 확인

styled-components: FAQs

 

---

출처 🏷️

https://oris9.tistory.com/79