본문 바로가기

FE26

[Typescript] AxiosError의 response받아오기, AxiosError Type Error의 Type 구글 로그인 버튼을 유저가 누르면 서버에서 리다이렉트할 주소를 리턴해주는 방식으로 소셜로그인 로직을 정했습니다. 이때 status가 200으로 오지않고 301로 오는데 이게 AxiosError로 나옵니다. 따라서 error에 응답값을 꺼내서 사용해야했는데요, error가 unknown이라는 타입에러가 떴습니다. 찾아보니 Typescript에서 catch 내부의 error는 unknown 이라고 하네요. 이는 catch 블록 내부의 에러가 인스턴스가 될거라고 보장할 수 없기 때문에 타입스크립트가 런타임에러를 피하고자 unknown처리를 해둔 것 입니다. 따라서 적절히 error 타입을 지정해주어야하는데요, 아래와 같은 방식은 모두 에러가 발생합니다. 해당 에러는 catch 블록 내부에.. 2023. 2. 26.
[Typescript] error 2786 : 'Component' cannot be used as a JSX component. 에러 메세지 에러 원인 에러를 읽어보면 return type이 'false | Element'로 되어있었습니다. 다른 컴포넌트를 확인해보니 JSX.Element를 반환하고 있었습니다. 그래서 문제의 컴포넌트의 return을 살펴보았는데 아래 코드처럼 return () 안에 태그없이 코드를 작성했습니다. react 컴포넌트에서 Return 값은 항상 하나의 태그로 묶여져 있어야합니다. 저같은 경우는 앞에 변수를 추가하면서 오류가 발생한 상황입니다! return ( showHeader() && ( {showBackBtn() ? ( ) : null} {setPageTitle()} ) ); ** 참고로 해당 오류는 @types/react의 버전문제 때문에도 발생할 수 있다고 합니다. 컴포넌트 return에 문제.. 2023. 2. 21.