[React] prop으로 변수 값을 전달

🙋 styled-component에 변수 값을 어떻게 전달하지?

export const InfoCircle = styled.div<{ color: string }>`
  border-radius: 50px;
  background-color: ${(props) => props.color};
  width: 12px;
  height: 12px;
`;

InfoCircle에 color를 props로 전달해야하는데
내가 넣어야하는 color가

color: ${PALETTE.MAIN_BLACK};

PALLET에서 Import해오는 문자열이었다..

그래서 처음에는

<Styled.InfoCircle color="${PALETTE.MAIN_BLUE}"></Styled.InfoCircle>

❌ 이렇게 그대로 넣는건가 했는데 색이 나오지않음!!

그래서 찾아 본 결과

컴포넌트의 prop으로 변수 값을 넘길 때 백틱과 중괄호를 함께 사용하지 않고, 오직 중괄호만 사용해야 합니다.

변수 값을 넘길때는 중괄호만 사용해야한다고 한다!
따라서 아래와 같이 작성하면 완성!

<Styled.InfoCircle color={PALETTE.MAIN_BLACK}></Styled.InfoCircle>