에러 문구
Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
→ styled-component 사용 시 발생하는 문제로, input 등과 같이 자식을 가질 수 없는 태그에 자식을 넣었을 때 발생하는 에러이다.
수정 전 코드
// 수정 전 코드
return (
<Container>
<TitleContainer>🔀 랜덤 피커</TitleContainer>
<DirectionContainer>참여자들을 입력해 주세요</DirectionContainer>
<InputContainer>
<TextInput>
<input
id="name"
placeholder="참여자 이름을 입력해 주세요"
value={participantName}
onChange={handleInputChange}
/>
</TextInput>
<InputButton>입력</InputButton>
</InputContainer>
<ListContainer/>
<ButtonsContainer>
<StyledLink to='/complete'>
<CompleteButton>완료</CompleteButton>
</StyledLink>
<StyledLink to='/initialize'>
<InitializationButton>초기화</InitializationButton>
</StyledLink>
</ButtonsContainer>
</Container>
);
};
const InputContainer = styled.div`
display: flex;
justify-content: center;
gap: 1.5rem;
`;
const TextInput = styled.div`
width: 13.5rem;
height: 3.125rem;
font-size: 1.5rem;
border: 1px solid #D9D9D9;
border-radius: 10px;
color: #000000;
background-color: #ffffff;
`;
// ... 생략
export default MainPage;
TypeScript
복사
해결 방법
<input></input>안에 값을 제거해준다. 기존에는 잘 몰라서 input 내에 label을 넣어줬다가, 해당 오류가 생겼기 때문에 <input /> 하고 아래에 <label for=~ />로 작성해줬다.
수정 후 코드
// 수정 후 코드
return (
<Container>
<TitleContainer>🔀 랜덤 피커</TitleContainer>
<DirectionContainer>참여자들을 입력해 주세요</DirectionContainer>
<InputContainer>
<TextInput
id="name"
value={participantName}
onChange={handleInputChange}
/>
<InputButton>입력</InputButton>
</InputContainer>
<ListContainer/>
<ButtonsContainer>
<StyledLink to='/complete'>
<CompleteButton>완료</CompleteButton>
</StyledLink>
<StyledLink to='/initialize'>
<InitializationButton>초기화</InitializationButton>
</StyledLink>
</ButtonsContainer>
</Container>
);
};
const InputContainer = styled.div`
display: flex;
justify-content: center;
gap: 1.2rem;
`;
const TextInput = styled.input`
width: 13.5rem;
height: 3rem;
font-size: 1.5rem;
color: #000000;
border: 1px solid #D9D9D9;
border-radius: 10px;
background-color: transparent;
box-shadow: none;
`;
// ... 생략
export default MainPage;
TypeScript
복사