Star Rating

해당 포스트는 제로베이스 오프라인스쿨 진행 과정 중 React PairProgramming과제를 진행하며 회고를 정리하는 글이다.

 

- 현상

react-icon에 props를 줄 때  selected 와 hovered 중 hovered 에만 경고가 났다.

  

import { AiFillStar } from 'react-icons/ai';

const Star = styled(AiFillStar)`
	...
  ${props =>
    props.hovered && css`color: var(--hovered-color);`
	}

  ${props =>
    props.selected && css`color: var(--selected-color);`
	}
`;

<Star
  ...
  selected={i <= selected}
  hovered={i <= hovered}
	...
/>

- 발견

경고가 발생하는 경우는 세 가지 같다. 첫 번째는 HTML 표준 속성의 타입에 맞지 않는 값을 전달한 경우,

두 번째는 HTML 비표준 속성의 경우 props를 DOM에 전달하기 전에 `styled-components` 내부에서 자동으로 필터링 하는데, 필터링이 되는 경우 경고가 발생하는 것으로 보인다.

하지만 hovered는 왜 경고가 뜨는지 의문이다. 추후 더 공부가 필요 할 것으로 보인다.

selected 는 HTML 표준 attribute기 때문에 오류가 나지 않은 것으로 보인다.

 

hovered 앞에 $를 붙여 해결하였다.

 

출처: https://developer.mozilla.org/ko/docs/Web/HTML/Attributes

 

  

...
${props =>
  props.$hovered && css`color: var(--hovered-color);
`}

    출처:https://styled-components.com/docs/api#transient-props

   

 

- 배운점

prefix 로 "$" 를 사용하게 되면, props 가 실제 DOM 요소에 전달되는 것을 막는 다는 것을 배웠다.

 

- 선언

발견 에서 아직 궁금증을 해결 하지 못한 부분이 있어 공부가 더 필요해 보인다.