[React/Typescript] styled-components에서 props사용 시 에러

문제상황

interface StyledDivProps {
  isfocused: boolean;
}

/* --- style --- */
const SearchBar = styled.div<StyledDivProps>`
  background-color: ${(props) =>
    props.isfocused ? "white" : "#f2f2f5"};
  border: 1px solid
    ${(props) => (props.isfocused ? "#dddddd" : "#f2f2f5")};
  transition: all 0.4s ease;
`;

const Topbar = () => {
  // 검색창 css관리용
  const [isfocuse, setIsfocuse] = React.useState(false);
  const onFocus = () => {
    setIsfocuse(true);
  };
  const offFocus = () => {
    setIsfocuse(false);
  };

  return (
    <Container>
      <SearchBar isfocused={isfocuse}>
        <SearchInput type="text" onFocus={onFocus} onBlur={offFocus} />
      </SearchBar>
    </Container>
  );
};
export default Topbar;

react-dohttp://m.development.js:86 Warning: Received `false` for a non-boolean attribute `isfocused`.
If you want to write it to the DOM, pass a string instead: isfocused="false" or isfocused={value.toString()}.
If you used to conditionally omit it with isfocused={condition && value}, pass isfocused={condition ? value : undefined} instead.

React-dohttp://m.development.js:86 경고: 부울이 아닌 속성 `isfocused`에 대해 `false`를 수신했습니다.
DOM에 쓰려면 대신 문자열(isfocused="false" 또는 isfocused={value.toString()})을 전달하세요.
isfocused={condition && value}를 사용하여 조건부로 생략했다면 isfocused={condition ? 값 : 정의되지 않음} 대신.

 

어째서 boolean이 문제가 되는지 모르겠어서 챗 gpt에게 물어보니,

내가 공부를 더 해야겠다는 생각밖에 들지 않았다. 답변을 읽어도 잘 이해가 안간다..😓

하여간 props를 boolean으로만 보내지 않으면 해당 오류는 안난다 !! 프로젝트 구동에 있어서 방해되는 에러는 아니었으나 콘솔창에 아무 경고 메세지 없이 깨끗한게 좋으니까 고쳤다!

 

✨ 해결

interface StyledDivProps {
  isfocused: string;
}

/* --- style --- */
const SearchBar = styled.div<StyledDivProps>`
  background-color: ${(props) =>
    props.isfocused === "true" ? "white" : "#f2f2f5"};
  border: 1px solid
    ${(props) => (props.isfocused === "true" ? "#dddddd" : "#f2f2f5")};
  transition: all 0.4s ease;
`;

const Topbar = () => {
  // 검색창 css관리용
  const [isfocuse, setIsfocuse] = React.useState(false);
  const onFocus = () => {
    setIsfocuse(true);
  };
  const offFocus = () => {
    setIsfocuse(false);
  };

  return (
    <Container>
      <SearchBar isfocused={isfocuse.toString()}>
        <SearchInput type="text" onFocus={onFocus} onBlur={offFocus} />
      </SearchBar>
    </Container>
  );
};
export default Topbar;