[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] Warning Received true for non-boolean attribute 오류 해결