[리엑트+타입스크립트] 간단한 ContextAPI 사용과 타입에러 질문 !!!

Question

간단하게 ContextAPI 리엑트 훅을 이용해서 변수 관리를 하려는데 그놈의 타입에러가 짜증나네옹 ;;;ㅂㄷㅂㄷ;; 아무리 정보와 지식을 찾아봐도 해결이 되지 않아서 선배님들에게 여쭤봅니다.// AuthContext.tsx import {createContext, useContext} from 'react'; export type AuthType = { auth: object; setAuth: (a: object) => void; } export const AuthContext = createContext({ auth: {a:1}, setAuth: () => console.log('why not worked??') }) export const useAuth = () => useContext(AuthContext);최상위 컴포넌트 App.tsx에서 useState 리엑트 훅으로 변수를 전역관리하기 위해서 다음과 같이 작성하였습니다. 그리고 useState로 관리하는 전역변수 auth는 객체가 들어갑니다. import React,{useState} from 'react' import styled from 'styled-components'; import ToolBar from './components/ToolBar'; import MainPage from "./pages/MainPage"; import LoginPage from "./pages/LoginPage"; import RegisterPage from "./pages/RegisterPage"; import { Switch, Route } from 'react-router-dom'; import { AuthContext, AuthType } from './contexts/AuthContext'; const Container = styled.div` max-width: 1200px; margin: 0 auto; `; function App() { const [auth, setAuth] = useState() return ( ) } export default App 하지만 auth, setAuth에서 타입에러가 발생하였습니다.... ㅠㅠType 'AuthType | undefined' is not assignable to type 'object'. Type 'undefined' is not assignable to type 'object'.ts(2322)Type 'Dispatch>' is not assignable to type '(a: object) => void'. Types of parameters 'value' and 'a' are incompatible. Type 'object' is not assignable to type 'SetStateAction'. Type 'object' is not assignable to type '(prevState: AuthType | undefined) => AuthType | undefined'. Type '{}' provides no match for the signature '(prevState: AuthType | undefined): AuthType | undefined'.ts(2322) 어떻게 타입을 선언하면 usestate를 사용해서 전역변수를 관리할 수 있을까요?? 도와주세요 선배님들 ㅠㅠ 충성충성 ^^7

페코옹 · Answer

이렇게 하심? import React from "react"; type Auth = { a: number } | null; type AuthType = { auth: Auth; setAuth: React.Dispatch>;}; const AuthContext = React.createContext({ auth: null, setAuth: () => {}}); export const useAuth = () => React.useContext(AuthContext); const LoginButton = () => { const { setAuth } = React.useContext(AuthContext); return ;}; const Body = () => { const value = React.useContext(AuthContext); return

{value.auth?.a}

;}; export default function App() { const [auth, setAuth] = React.useState(null); return ( );}

토하토하 · Answer

안뇽하세요 선배님 !! 답변 정말 감사합니다 이거 하다가 짜증나서 리덕스 툴킷으로 바꿧는데옹 ㅋㅋㅋ선배님께서 답뱐해주신 내용 참고해서 시도해보고 답변드리겟습니다 충성충성 ^^7

[리엑트+타입스크립트] 간단한 ContextAPI 사용과 타입에러 질문 !!!

2개의 답변

Q&A 목록