Styled-Components: "Prop `className` did not match" 경고 해결

title_thumbnail(경고 수정하는 방법)

Table of Contents

Styled-Components: “Prop `className` did not match” 경고 해결하기

React 애플리케이션에서 styled-components를 사용하고 있다면 콘솔에 “Warning: Prop `className` did not match”라는 경고 메시지를 만나게 될 수도 있습니다. 이 문제는 스타일이 제대로 렌더링되지 않을 수 있습니다. 이 블로그 포스트에서는 이 경고의 원인과 해결 방법에 대해 알아보겠습니다.

경고 이해하기

“Prop `className` did not match” 경고를 보게 되면, styled-components에서 styled() 함수를 사용하여 React 컴포넌트를 감싸지만, className prop이 자식 컴포넌트에 전달되지 않는 것을 의미합니다. 결과적으로 스타일이 정의된 styled 컴포넌트가 적용되지 않고 UI가 예상대로 렌더링되지 않습니다.

해결책: className을 자식 컴포넌트에 전달하기

이 문제를 해결하기 위해 생성된 className을 스타일을 적용하려는 컴포넌트에 수동으로 적용해야 합니다. 이를 위한 몇 가지 방법이 있습니다:

1. this.props.className 사용하기

<Link className={this.props.className} to={link}>
  {children}
</Link>

위의 예제에서는 styled-components에서 생성된 className prop을 this.props.className을 사용하여 Link 컴포넌트에 전달합니다.

2. props.className 사용하기

<Link className={props.className} to={link}>
  {children}
</Link>

이 접근 방식에서는 생성된 className을 직접 props.className을 사용하여 Link 컴포넌트에 전달합니다.

3. 분해된 className 사용하기

const LinkComponent = ({ className, children, link }) => (
  <Link className={className} to={link}>
    {children}
  </Link>
);

이 예제에서는 props에서 className을 분해하여 Link 컴포넌트에 적용합니다.

예시: 스타일이 적용된 링크 컴포넌트 만들기

styled-components를 사용하여 링크 컴포넌트에 스타일을 적용하는 사용 사례를 고려해 보겠습니다. 다음과 같이 진행할 수 있습니다:

1. className과 prop을 받는 함수형 링크 컴포넌트 만들기

import React from "react";
import PropTypes from "prop-types";
import { Link } from "react-router-dom";

const LinkComponent = ({ className, children, link }) => (
  <Link className={className} to={link}>
    {children}
  </Link>
);

LinkComponent.propTypes = {
  className: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired,
  children: PropTypes.string.isRequired
};

export default LinkComponent;

2. styled-components를 사용하여 링크 컴포넌트에 스타일 적용하기

import styled from "styled-components";
import LinkComponent from "./LinkComponent";

const StyledLink = styled(LinkComponent)`
  color: ${props => (!props.primary && !props.danger ? "#03a9f3" : "#ffffff")};
  // 추가적인 스타일...
`;

export default StyledLink;

이 예제에서는 LinkComponent를 가져와 styled-components의 styled() 함수에 전달합니다. 그런 다음 CSS-in-JS 문법을 사용하여 원하는 스타일을 적용할 수 있습니다.

3. 애플리케이션에서 StyledLink 컴포넌트 사용하기

import React from "react";
import StyledLink from "./StyledLink";

export default () => (
  <nav className="container">
    <StyledLink primary link="/">Home</StyledLink>
    <StyledLink danger link="/about">About</StyledLink>
    <StyledLink link="/portfolio">Portfolio</StyledLink>
  </nav>
);

이 마지막 단계에서 애플리케이션에 StyledLink 컴포넌트를 포함시켜 StyledLink에 정의된 스타일이 Link 컴포넌트에 적용됩니다.

결론

styled-components에서 “Prop `className` did not match” 경고는 className prop이 자식 컴포넌트에 전달되지 않을 때 발생합니다. 제공된 해결책을 따르면 스타일이 제대로 렌더링되고 일치하지 않는 경고를 피할 수 있습니다. 이제 styled-components 프로젝트에서 이 문제를 해결하고 수정하는 데 용이합니다.

참고 자료 :

https://stackoverflow.com/questions/53332428/styled-components-is-saying-wrapped-styled-around-your-react-component-compon

같은 카테고리의 다른 글 보기 :

reactjs

Styled-Components: “Prop `className` did not match” 경고 해결