์ฌ๊ธฐ์ defaultValue
์ธ์๊ฐ ์ ํ ์ฌํญ์ด ์๋ ์ด์ ๊ฐ ์์ต๋๊น?
import * as React from 'react';
import * as firebase from 'firebase/app';
interface AuthProps {
children: any;
}
interface AuthState {
user: firebase.User | null;
}
interface AuthContextProps extends AuthState {
updateUser(user: firebase.User | null): void;
}
export const AuthContext = React.createContext<AuthContextProps>(); // <-- ERROR HERE!
// export const AuthConsumer = AuthContext.Consumer;
export const AuthProvider = (props: AuthProps) => {
const [state, setState] = React.useState<AuthState>({
user: null,
});
const updateUser = (user: firebase.User | null) => setState({ user });
return (
<AuthContext.Provider
value={{
updateUser,
user: state.user,
}}
>
{props.children}
</AuthContext.Provider>
);
};
๋ฌธ์ URL: https://reactjs.org/docs/context.html#reactcreatecontext
defaultValue ์ธ์๋ ํธ๋ฆฌ์์ ๊ตฌ์ฑ ์์ ์์ ์ผ์นํ๋ ๊ณต๊ธ์๊ฐ ์๋ ๊ฒฝ์ฐ์๋ง ์ฌ์ฉ๋ฉ๋๋ค.
ํธ๋ฆฌ ์์ ์ผ์นํ๋ ๊ณต๊ธ์๊ฐ ์์ผ๋ฏ๋ก ๊ธฐ๋ณธ๊ฐ์ ์ค์ ํ์ง ์๊ณ ์ปจํ ์คํธ๋ฅผ ์์ฑํ ์ ์์ด์ผ ํฉ๋๋ค. ์๋๋ฉด ์ ๊ฐ ํ๋ ธ์ต๋๊น?
์ง๊ธ์ ์ด ๋ฌธ์ ๋ฅผ ๋ซ์ต๋๋ค. ๋๊ตฐ๊ฐ ์ด๊ฒ์ด ์ค์ ๋ฌธ์ ๋ผ๊ณ ์๊ฐํ๋ค๋ฉด ์์ ๋กญ๊ฒ ๊ธฐ์ฌํ ์ ์์ต๋๋ค.
๊ธฐ๋ณธ๊ฐ์ด ์์ผ๋ฉด ๋ด typescript ์คํ ๋น๋๊ฐ ์๋ํ์ง ์์ต๋๋ค. ์ด๊ฒ์ ์ ํ ์ฌํญ์ผ๋ก ๋ง๋๋ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?
๊ธฐ๋ณธ๊ฐ ์์ด ์ฝ๋๋ฅผ ์ปดํ์ผํ๋ ค๋ฉด null
์ด๊ธฐํํ ์ ์์ต๋๋ค.
export const AuthContext = React.createContext(null)
~ null
์๋ฃจ์
์ด ๋ ์ด์ ์๋ํ์ง ์์ต๋๋ค. ์๋ก์ด ๋ฌธ์ ๋ฅผ ์ ๊ธฐํ๊ฒ ์ต๋๋ค.~
ํธ์ง: ์๋์, https://github.com/DefinitelyTyped/DefinitelyTyped/pull/34854 ์์ ์ด์ ๋ฅผ ์ธ๊ธํฉ๋๋ค. ์ ๊ธ์.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ธฐ๋ณธ๊ฐ์ด ์์ผ๋ฉด ๋ด typescript ์คํ ๋น๋๊ฐ ์๋ํ์ง ์์ต๋๋ค. ์ด๊ฒ์ ์ ํ ์ฌํญ์ผ๋ก ๋ง๋๋ ๋ฐฉ๋ฒ์ด ์์ต๋๊น?