어제 사고친거 수습해야즤
TIL1) React에서 Props와 TypeScript 오류 해결하기
오늘 React 컴포넌트에서 TypeScript와 Props 관련 오류를 해결하는 방법에 대해 배웠다. 특히, login 함수를 Props로 전달하는 과정에서 발생한 오류를 처리하는 데 집중했다.
(진짜, 어려워서 땅속으로 사라질뻔했다)
발생한 오류
login={login} 부분에서 다음과 같은 오류가 발생:
Type '{ login: () => void; }' is not
assignable to type 'IntrinsicAttributes'.
Property 'login' does not exist on type 'IntrinsicAttributes'.ts(2322)
원인
이 오류는 Content 컴포넌트에서 Props를 정의할 때, Props의 타입이 올바르게 지정되지 않았기 때문에 발생했다. 즉, Content 컴포넌트가 login 함수를 Props로 받는다고 명시했지만, 이를 사용하는 컴포넌트에서 해당 Props를 전달하지 않아 TypeScript가 오류를 발생시켰다.
Solution
Props 타입 확인: Content 컴포넌트의 Props 타입이 올바르게 정의되어 있는지 확인했다
const Content: React.FC<{ login: () => void; isAuthenticated: boolean }> = ({
login,
isAuthenticated,
}) => { ... }
올바른 Props 전달: Content 컴포넌트를 사용하는 곳에서 login 함수를 올바르게 전달하도록 수정했다.
<Content login={loginFunction} isAuthenticated={isAuthenticated} />
와 진짜, 진심 눈 빠지는 줄 알았다.
라섹하면뭐함, 계속 안경쓰니까 콧대 낮아지는거 같음
꺄아아ㅏ아아아ㅏ가ㅏ
어쨌든, 고치면 된거 아님/ 핳, 양송이 사러가야징
오늘의 TIL도 작성완료!
Challenge & Change