전투코딩
[React] Authenticated is not a function - createContext
에러 확인
리액트에서 클레이풀을 활용한 E-Commerce 페이지를 구현중에 발생한 에러이다.
상품의 정보가 담긴 데이터가 배열로 잘 불러와지지만,
화면에 렌더링이 되고 있지 않은 상태이다.
에러를 보기 전에 터미널에 어떤 메세지가 출력되고 있는지 확인 해 보니
Line 55:11: 'AuthContextData' is assigned a value but never used
55 번째 줄에 작성된 AuthContextData 가 선언은 되었지만,
값이 할당되지 않았다는 메세지가 출력되어있다.
에러 해결
코드를 살펴보자.
실제로 해당 코드에서,
isAuthenticated 함수가 AuthContext.Provider 컴포넌트에 제대로 전달되지 않아
isAuthenticated is not a function 에러가 발생한 것이다.
함수들이 담긴 AuthContextData 가 할당되어있지만,
호출이 되지 않아 그 안에 담긴 함수들 또한 실행되지 않는 상황이 발생한 것이다.
현재는 <AuthContext.Provider value> 부분에서,
value props 에 객체를 전달 해 주어야 하는데
현재는 객체의 키 이름만 전달 해 주고 있는 상황이다.
따라서,
AuthContextData 객체를 value 의 props 로 값을 전달 해 주면 된다.
사용된 Provider 는 Context 를 구독하는 컴포넌트들에게 Context 의 변화를 알리는 역할을 갖고 있는데,
AuthContext 에 Value 로 AuthContextData 객체가 전달되어,
하위 컴포넌트에서 해당 함수와 데이터를 전달하여 사용할 수 있다.
코드 리펙토링
또 다른 측면에서 바라보았을 경우에는,
Clayful 라이브러리에서
Customer 클래스에 isAuthenticated 함수가 없기 때문에 발생한 경우이다.
Clayful 라이브러리의 Customer 클래스는
고객 정보를 관리하기 위한 클래스로, isAuthenticated 함수 대신 get 함수를 제공한다.
따라서,
get 함수를 사용하여 고객 정보를 가져와서 로그인 상태를 확인할 수 있다.
const isAuthenticated = () => {
var Customer = Clayful.Customer;
var options = {
customer: localStorage.getItem('accessToken'),
};
Customer.get(options, function (err, result) {
if (err) {
// Error case
console.log(err.code);
setIsAuth(false);
return;
}
var data = result.data;
if (data.id) {
setIsAuth(true);
} else {
setIsAuth(false);
}
});
};
변경된 코드에서 Customer.get() 함수를 사용하여 고객의 정보를 가져오고,
가져온 정보를 통해 로그인 상태를 확인한다.
만약,
가져온 정보에 id 속성이 존재한다면 로그인 상태로 간주한다.