[React] Styled-Compoent

📱테스트 환경

"react": "18.3.0",
"react-dom": "18.3.0"

---

나는 React 에서 Styled-Components 를 사용하는데

전부 커스텀가능하게 만들고 사용한다.

예를 들어서

export const Flex = styled.div.<TypeStyles>`
    display: flex;
    align-items: ${(props) => props.alignItems || "center"};
    justify-content: ${(props) => props.justifyContent || "center"};
    gap: ${(props) => (props.gap ? `${pixelToRem(props.gap)}` : 0)};
    flex-direction: ${(props) => props.flexDirection || "row"};
    margin-top: ${(props) => (props.marginTop ? `${pixelToRem(props.marginTop)}` : 0)};
    margin-bottom: ${(props) => (props.marginBottom ? `${pixelToRem(props.marginBottom)}` : 0)};
    margin-left: ${(props) => (props.marginLeft ? `${pixelToRem(props.marginLeft)}` : 0)};
    margin-right: ${(props) => (props.marginRight ? `${pixelToRem(props.marginRight)}` : 0)};
`;

이런식으로 기본값과 함께 전부 커스텀해서 사용할 수 있도록 사용하는데

나는 재사용성을 높이는 방법을 고민해본 결과 이렇게 사용하는게

좋을 것 같아서 사용하고있었다.

다른 좋은방법이 있다면 추천해주면 감사하겠다.

아무튼 props 를 전부 전달해주는 방식을 사용하다보니

콘솔창에 에러가 뜨는데

Warning: React does not recognize the marginTop prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase margintop instead. If you accidentally passed it from a parent component, remove it from the DOM element.

에러떠서 안된다거나 그런건 아닌데 콘솔창에 에러가 뜨니까 거슬렸다.

해당 에러가 DOM 에 'marginTop' 이라는 프롭스를 전달해주고 있었고

이를 경고하기 위함이였다.

이를 해결하기 위해

withConfig

shouldForwardProp

를 사용하였고 코드는 다음과 같다.

export const Flex = styled.div.withConfig({
    shouldForwardProp: (prop) => !["alignItems", "justifyContent", "gap", "flexDirection", "marginTop", "marginBottom", "marginLeft", "marginRight"].includes(prop),
})<TypeStyles>`
    display: flex;
    align-items: ${(props) => props.alignItems || "center"};
    justify-content: ${(props) => props.justifyContent || "center"};
    gap: ${(props) => (props.gap ? `${pixelToRem(props.gap)}` : 0)};
    flex-direction: ${(props) => props.flexDirection || "row"};
    margin-top: ${(props) => (props.marginTop ? `${pixelToRem(props.marginTop)}` : 0)};
    margin-bottom: ${(props) => (props.marginBottom ? `${pixelToRem(props.marginBottom)}` : 0)};
    margin-left: ${(props) => (props.marginLeft ? `${pixelToRem(props.marginLeft)}` : 0)};
    margin-right: ${(props) => (props.marginRight ? `${pixelToRem(props.marginRight)}` : 0)};
`;

이렇게하면 실제 DOM 에 프롭스를 전달하지않고

스타일하는곳에서만 사용할 수 있도록 해준다고 한다.

그래도 콘솔창에 에러가 뜨지않게 하는걸 목표로 하지 않아야 하겠는가

^_______________________^