# 2020.08월

# 8월 이슈 요약

  • react로 기존 네이티브 앱 웹뷰로 만들기 진행 중
  • 기존 vue 웹 유지보수

# 에러 해결 모음

# 1. Warning: Functions are not valid as a React child.

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
  • 함수인데 실행 안하고 render 부분에 코딩한 경우입니다.
  • 함수 코드를 render에 넣었으니 당연히 정상적인 실행이 안되겠죠
const Example = () => {
  const bookingStateTime = () => {
    switch (booking.status) {
      case "booking_confirmed":
      case "booked":
        return `예약 일시 : ${booking.created_at}`;
      case "cancel":
        return `취소 일시 : ${booking.lecture.course.updated_at}`;
      default:
        return `수정 일시 : ${booking.lecture.course.updated_at}`;
    }
  };
  return <span>{bookingStateTime}</span>;
};
  • 위처럼 특정 함수를 만들고 render 부분에서 실행 안하고 함수만 호출시 위 같은 에러가 뜹니다.
  • 해결방법은 함수 실행해주면 됩니다.
const Example = () => {
  const bookingStateTime = () => {
    switch (booking.status) {
      case "booking_confirmed":
      case "booked":
        return `예약 일시 : ${booking.created_at}`;
      case "cancel":
        return `취소 일시 : ${booking.lecture.course.updated_at}`;
      default:
        return `수정 일시 : ${booking.lecture.course.updated_at}`;
    }
  };
  return <span>{bookingStateTime()}</span>;
};

# 에러 해결 모음

# 1. Expected 0 type arguments, but got 1.

Expected 0 type arguments, but got 1.
  • params애 들어올 값의 타입을 정의한 것 없는 데, params을 넣은 경우

# 2. Property context does not exist on type NodeRequire

Property context does not exist on type NodeRequire
  • require가 뭔지 몰라서 나오는 에러
  • fix: npm install @types/webpack-env 설치시 해결

# 3. No overload matches this call.

No overload matches this call.
  • 정의한 타입과, 받은 타입이 다른 경우
    • 불리언인데 string, number를 넣은 경우
  • 직접 빌드를 해서 터미널로 에러를 보는게 디테일하게 에러를 관찰 할 수 있다.
import Button from "antd-mobile/lib/button";
// --> node_mobule/antd-mobile/lib/button/PropType.d.ts

export interface ButtonPropsType {
  type?: "primary" | "warning" | "ghost";
  size?: "large" | "small";
  disabled?: boolean;
  loading?: boolean;
}
// 위 prop type을 보고 코딩하면 편하다

# 4. 객체가 nesting된 경우 key로 객체에 접근할 때 나오는 에러

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

  • 아래 예시대로 해결
// 객체 nesting된 경우 key로 접근하려할 때 띄우는 에러
const [checked, setCheckBox] = useState({
  useAgree: false,
  infoAgree: false
});

const onCheckBox = (e: { target: { id: any } }) => {
  const { id } = e.target;
  setCheckBox({
    ...checked,
    [id]: !checked[id]
  });
};

// !checked[id] 이렇게 접근하려 할때 checked의 타입이 뭔지 모른다고 한다.

// fix
const [checked, setCheckBox] = useState<{ [key: string]: boolean }>({
  useAgree: false,
  infoAgree: false
});

# 5. props로 내린 값을 사용하지 않을 때, 나오는 에러

loading: boolean; onChange: (e: any) => Promise<void>; onSubmit: (e: any) => Promise<void>; }' is not assignable to type 'IntrinsicAttributes & Pick<Pick<{ loginEmail: any; password: any; valid: any; loading: any; onChange: any; onSubmit: any; }, never> & Pick<InferProps<{ loginEmail: Requireable<ReactText>; ... 4 more ...; onSubmit: Requireable<...>; }>, "valid" | ... 4 more ... | "onSubmit">, never> & Partial<...> & Partial<...>'.
  Property 'error' does not exist on type 'IntrinsicAttributes & Pick<Pick<{ loginEmail: any; password: any; valid: any; loading: any; onChange: any; onSubmit: any; }, never> & Pick<InferProps<{ loginEmail: Requireable<ReactText>; ... 4 more ...; onSubmit: Requireable<...>; }>, "valid" | ... 4 more ... | "onSubmit">, never> & Partial<...> & Partial<...>'.ts(2322)
<LoginPresenter
  loginEmail={loginEmail}
  password={password}
  valid={valid}
  error={error}
  loading={loading}
  onChange={onChange}
  onSubmit={onSubmit}
/>;

// error를 loginPresenter로 내리고 있으나 loginPresenter에서는 error 값을 사용하지 않고 있움

function Login({ loginEmail, password, valid, loading, onChange, onSubmit }) {}

# 6. window 객체 접근

  • typescript는 window 객체에 대한 정의를 해주지 않으면 에러 발생
  • tsconfig.json에 window 함수를 declear 한 파일을 넣어줘야한다
// global.d.ts
declare interface Window {
  ReactNativeWebView: any;
}
{
  ...
  "include": ["src", "global.d.ts"]
}

# 배운점

# 1. react - 공용 컴포넌트

# 2. python - 네이버 기사 크롤링

# 3. html - dataset 사용법

# 4. React - createRef vs useRef

# 5. npm 배포하기

최근변경일: 1/20/2022, 11:36:29 AM