Refactor
SignupForm 컴포넌트에서 nth-child() 를 [for='']수정할 것!
Today Task
•
상품 등록 페이지 UI 구현
Trouble Shooting
1. CSS 선택자는 CSS 형태로 작성하기
export const Form = styled.form`
// 이전 코드
& label[htmlFor='productName'] {
margin-top: 30px;
}
// 수정 후 코드
& label[for='productName'] {
margin-top: 30px;
}
`;
JavaScript
복사
•
스타일드 컴포넌트에서 어트리뷰트 선택자를 사용
◦
htmlFor는 적용되지 않음
◦
for는 적용됨
→ 이러한 현상이 발생하는 이유는 스타일드 컴포넌트에서 백틱 `` 안에는 CSS 문법을 사용하기 때문이라 추정 중
⇒ 아무튼 해결!
2. 스타일드 컴포넌트 상속하기 + 어트리뷰트 작성하기
export const ProductNameInput = styled(ActiveTextInput).attrs({
id: 'productName',
placeholder: '2~15자 이내여야 합니다.',
})``;
JavaScript
복사
•
스타일드 컴포넌트는 styled(상속받고자 하는 스타일드 컴포넌트명) 형태로 상속 가능
→ 함수 컴포넌트는 스타일드 컴포넌트로 상속 불가!
•
.attrs({}) 형태로 어트리뷰트 작성 가능
•
2가지를 함께 작성하다 에러 발생
◦
이유: 백틱 ``을 빠뜨렸기 때문
→ 내용이 없어도 백틱 작성을 꼭 하자!
◦
에러 이유를 출력해주지 않아서 많이 혼란스러웠음
⇒ 해결!
