에러발생

회사 프로젝트를 진행 중 JS -> TS로 리펙토리 하는중 반갑지 않은 에러가 발생하였다..

import styled from "styled-components";

type DivProps = {
  mode: string;
};


const Div = styled.div<DivProps>`
  margin: 0 ${({ theme }) => theme.left};
  min-height: calc(100vh - 400px);

  h2 {
    margin-bottom: 20px;
    letter-spacing: -0.44px;
    line-height: 1.5;
    font: 600 22px/32.56px ${({ theme }) => theme.noto};
  }

  > div {
    &.AuthorList {
      margin-top: 80px;
      > div {
        display: flex;
        width: ${({ theme }) => theme.pgWidth};
        justify-content: space-between;
        align-items: center;

        h2 {
          font: 700 22px/33px ${({ theme }) => theme.noto};
          color: #151515;
          letter-spacing: -0.44px;
          margin-bottom: 24px;
          color: ${({ mode }) => (mode === "light" ? "#151515" : "#ffffff")};
        }
        > p {
          display: flex;
          align-items: center;
          justify-content: space-around;
          > span {
            position: relative;
            font: 400 14px/20px ${({ theme }) => theme.noto};
            margin-left: 17px;
            letter-spacing: -0.35px;
            cursor: pointer;
            color: ${({ mode }) => (mode === "light" ? "#151515" : "#ffffff")};
          }
        }
      }
      > ul {
        width: ${({ theme }) => theme.pgWidth};
        min-height: 200px;
        display: flex;
        flex-wrap: wrap;
        gap: 52px ${px2vw(40)};
        > li {
          width: ${px2vw(180)};
          > div {
            > p {
            }
          }
        }
      }
    }

    &:last-of-type {
      margin-top: 55px;
      margin-bottom: 115px;
      display: flex;
    }
    .btnArea {
      display: flex;
      align-items: center;
      padding-top: 5px;
      margin-left: 13px;
      button {
        &:first-of-type {
          margin-right: 7px;
        }
      }
    }
  }
`;

const Search = styled.div<DivProps>`
  height: 32px;
  width: 100%;
  position: relative;

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: ${px2vw(500)};
    margin: 0 auto;

    > p {
      padding: 0px 10px;
      font: 400 14px/20px;
      color: #9d9d9d;
      cursor: pointer;
    }
    > p.active {
      color: ${({ mode }) => (mode == "light" ? "#1152CC" : "white")};
    }
    > button {
      padding: 0px 5px;
    }
  }
`;

const AuthorMainPage = ({ mode }) => {

  // mode 매겨변수 type은 string이다.
  
  return (
    <div style={{ background: mode == "light" ? "#ffff" : "#151515" }}>
      <Div mode={mode}> // error 발생
        <Search mode={mode}> //error 발생
        </Search>
      </Div>
    </div>
  );
};

export default AuthorMainPage;

에러원인

위 코드에서 다음과 같은 에러가 발생 하였다.. 대충 해석해보면 매개변수의 타입이 예상한 타입과 일치하지 않다는 것 같다.

분명 mode 매개변수는 string타입이다. 근데 왜 에러가 뜨는 것일까?? 에러메시지를 잘 보면 chlidren 도 타입을 지정해줘야 한다고 한다.

내가 하지도 않았는데 어찌아누..

해결방안

type DivProps = {
  mode: string;
  children?: React.ReactNode;
};

children?: React.ReactNode;을 추가해 옵셔널 타입으로 해결하면 에러가 사라진다.