[TIL] 221031

Beanxx·2022년 10월 31일

TIL

목록 보기

88/120

🔥 오늘 한 일

[Udemy React] Section27(React + TypeScript) 학습
프로그래머스 Lv.0 4문제 완료 - Lv.0 문제 All 완료 ✨
[BearMello 플젝]
- 회원정보 조회 & 수정 기능 구현
- 고객용 리뷰 등록 & 수정,삭제 기능 fix

🚨 Error Handling

💡 TS - children type error

기존 코드는 아래와 같았다. children은 내장 프로퍼티가 따로 타입 지정을 안해줘도 된다고 알고 있었는데 계속 children 부분에서 에러가 발생했다..😭

const TodosContextProvider: React.FC = (props) => {
	...
  return (
    <TodosContext.Provider value={contextValue}>
      {props.children}
    </TodosContext.Provider>
  );
};

찾아보니까 React 18 버전부터 변경된 부분이 생겼고, 이 중에 chidren도 타입을 지정해줘야 한다는 것이다. 아래 코드처럼 chidren type을 따로 지정해주면 error 사라짐!

🔗 [참고자료] 리액트 18의 타입스크립트 타입 변경점

// React version 18부턴 children 사용시에 따로 타입을 지정해줘야 한다.
// 안해주면 error 발생
type Props = {
  children: React.ReactNode;
};

const TodosContextProvider: React.FC<Props> = ({ children }) => {
	...
  return (
    <TodosContext.Provider value={contextValue}>
      {children}
    </TodosContext.Provider>
  );
};