[React] Warning Received true for non-boolean attribute 오류 해결
⛑ 작업자
→ 박송희
→ 작업 기간 : 2022년 7월 24일
💡 원인
→ styled-components에서 값을 받을 때, boolean을 정확하게 인지하지 못하는 것 같음
🗡 해결
→ direction={direction}로 있던 props 값을 direction={direction ? 1 : 0}로 변경
메인 슬라이더에서 오류 발생하였다!
styled-components에서 발생하는 오류인것 같다.
Warning: Received `true` for a non-boolean attribute `{속성}`.
If you want to write it to the DOM,
pass a string instead: {속성}=“true” or {속성}={value.toString()}.
오류 내용
react-dom.development.js:84 Warning: Received `true` for a non-boolean attribute `direction`.
If you want to write it to the DOM, pass a string instead: direction="true" or direction={value.toString()}.
at button
at O (http://localhost:3000/static/js/bundle.js:446134:6)
at SliderButton (http://localhost:3000/static/js/bundle.js:8332:5)
at div
at O (http://localhost:3000/static/js/bundle.js:446134:6)
at div
at O (http://localhost:3000/static/js/bundle.js:446134:6)
at SliderMain (http://localhost:3000/static/js/bundle.js:8582:5)
at section
at O (http://localhost:3000/static/js/bundle.js:446134:6)
at Home (http://localhost:3000/static/js/bundle.js:2215:86)
at Routes (http://localhost:3000/static/js/bundle.js:429991:5)
at Router (http://localhost:3000/static/js/bundle.js:429924:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:428733:5)
at Router (http://localhost:3000/static/js/bundle.js:921:5)
at Fe (http://localhost:3000/static/js/bundle.js:446045:60)
at App (http://localhost:3000/static/js/bundle.js:142:72)
at RecoilRoot_INTERNAL (http://localhost:3000/static/js/bundle.js:439760:5)
at RecoilRoot (http://localhost:3000/static/js/bundle.js:439926:5)
HTML을 JSX로 변환하는 동안 때때로 잘못된 프로토타입을 작성하므로 반응은 이를 부울 유형의 소품으로 처리한다고 하는것 같다(정확하지는 않음)
그래서 아래 오류가 발생한다고 합니다.
direction={direction}이 boolean 형넘겨주지만 boolean 판단되지 않는것 같습니다.
(동작은 하긴 하는데 에러가 뜸)
import { ReactComponent as ArrowIcon } from "../../../assets/icons/ic_arrow.svg";
import styled, { css } from "styled-components";
const BtnSlideControl = styled.button`
position: absolute;
top: calc(50% - 30px);
padding: 20px 4px;
z-index: 1;
background-color: white;
width: 30px;
height: 60px;
opacity: 0.5;
border-radius: 15px;
border: none;
${(props) =>
props.direction
? css`
transform: rotate(180deg);
left: 1rem;
`
: css`
right: 1rem;
`};
`;
export default function SliderButton({ direction, onClick }) {
return (
<BtnSlideControl onClick={onClick} direction={direction}>
<ArrowIcon width="16" height="16" fill="#333" />
</BtnSlideControl>
);
}
direction={direction}로 있던 props 값을 direction={direction ? 1 : 0}로 변경해주었습니다.
import { ReactComponent as ArrowIcon } from "../../../assets/icons/ic_arrow.svg";
import styled, { css } from "styled-components";
const BtnSlideControl = styled.button`
position: absolute;
top: calc(50% - 30px);
padding: 20px 4px;
z-index: 1;
background-color: white;
width: 30px;
height: 60px;
opacity: 0.5;
border-radius: 15px;
border: none;
${(props) =>
props.direction
? css`
transform: rotate(180deg);
left: 1rem;
`
: css`
right: 1rem;
`};
`;
export default function SliderButton({ direction, onClick }) {
return (
<BtnSlideControl onClick={onClick} direction={direction ? 1 : 0}>
<ArrowIcon width="16" height="16" fill="#333" />
</BtnSlideControl>
);
}
그 다음부터는 에러가 발생하지 않습니다~
'웹 개발 > React 프로젝트' 카테고리의 다른 글
[React] ApexCharts 커스텀(Bar) (1) | 2022.09.10 |
---|---|
[React] useCallback을 사용해서 한번만 api 요청하게 하자 (1) | 2022.09.10 |
[React] 로그인, 로그아웃 에러핸들링 고민 (0) | 2022.09.10 |
[React] 비동기 데이터 axios Post 전송(Query String, Request body) (1) | 2022.09.10 |
[React] Styled-Components로 만든 요소의 선언 위치에서 발생하는 경고 (0) | 2022.07.25 |
[React] Warning Received true for non-boolean attribute 오류 해결