[TIL] 내일배움캠프 React 과정 2023.02.20

Today I Learned

오후 3시에 원장님께 기본 기능 시연하고 피드백받기
로그인 모달, 회원가입 페이지 UI 구현

typescript에서 styled-components에 여러 개의 props를 넘길 경우

처음에는 props의 타입을 이렇게 지정해 줬었는데 CategoryBtn 하단으로 새로운 스타일 컴포넌트를 작성해도 폰트 색상이 원래대로 적용이 안 돼서 뭔가 이상한가 하는 생각에 문제를 찾다가 타입 지정을 뭔가 잘못해 준 거 같다는 것을 발견했다.

interface CategoryBtnStyledProps {
  bg: string;
  text: string;
  border: string;
}

export const CategoryBtn = styled.button<CategoryBtnStyledProps>`
  padding: 0 17px;
  height: 35px;
  background-color: ${(props) => props.bg};
  border: 2px solid ${(props) => props.border};
  border-radius: 10px;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  color: ${(props) => props.text};
  margin-bottom: 12px;
  margin-right: 13px;
`;

그래서 구글링을 하다가 styled-components의 타입을 지정할 때 interface를 사용할 수 있다는 것도 알게 됐다. (지금 생각해 보면 당연히 가능할 거 같다...) 이렇게 하니 문제가 해결되었다. 근데 이게 에러까지는 아닌 거 같고 그냥 코드 치는 데 색깔이 안 먹으니까 불편해서 수정했다.

참고 https://thsd-stjd.tistory.com/134