React context API 사용하기 (useNavigate 사용 시 에러 해결)

You should call navigate() in a React.useEffect(), not when your component is first rendered.

const UserProvider = ({ children }: any) => {

    const [isLogin, setIsLogin] = useState<boolean>(false);
    const navigate = useNavigate();

    let userData: User = {
        email: '',
        email_verified: false,
        phone_verified: false,
        sub: ''
    };

    // 로컬 스토리지 확인
    const authData = localStorage.getItem(process.env.REACT_APP_SUPABASE_TOKEN!);

    if (!authData) {
        //setIsLogin(false);
        console.log('authData 없을 때');
        navigate('/login');
    } else {
        //setIsLogin(true);
        userData = JSON.parse(authData).user_metadata;
        console.log('authData 있을 때');
    }

    return (
        <UserContext.Provider
            value={{ userData }}
        >
            {children}
        </UserContext.Provider>
    );
};

export default UserProvider;

• navigate() 를 useEffect 안에 넣어야 한다는 에러다.

• 수정 후

export const UserContext = createContext<UserContextType | null>(null);

const UserProvider = ({ children }: any) => {

    const [isLogin, setIsLogin] = useState<boolean>(false);
    const navigate = useNavigate();

    let userData: User = {
        email: '',
        email_verified: false,
        phone_verified: false,
        sub: ''
    };

    // 로컬 스토리지 확인
    const authData = localStorage.getItem(process.env.REACT_APP_SUPABASE_TOKEN!);

    useEffect(() => {
        if (!authData) {
            //setIsLogin(false);
            console.log('authData 없을 때');
            navigate('/login');
        } else {
            //setIsLogin(true);
            userData = JSON.parse(authData).user_metadata;
            console.log('authData 있을 때');
        }
    }, []);

    return (
        <UserContext.Provider
            value={{ userData }}
        >
            {children}
        </UserContext.Provider>
    );
};

export default UserProvider;

• useEffect 안에 로직을 넣어주고 처음에 렌더링 될 때 한번만 실행되도록 빈 배열을 의존성 배열로 추가한다.