[Error] document is not defined

React나 Next.js와 같은 언어에서 document를 사용하면 아래와 같이 document를 찾을 수 없다는 오류가 발생한다.

const slider = document.querySelector(".items");

 

React나 Next.js와 같은 프로그래밍 언어는 서버 측과 클라이언트 측에서 모두 움직이는 프레임워크인데

document는 클라이언트 측에서만 정의된 전역 변수이기 때문에 일어난 오류라고 한다.

 

위와 같이 단순히 document만 사용하려고 시도한다.

(즉, 클라이언트 쪽 전역변수를 사용하려면 렌더링된 후에 사용 해야 한다고 한다.)

 

그래서 아래 두가지 방법을 이용하고 있다.

 

1) 조건문을 사용해서 document가 있을 경우 필요한 값을 가져오는 방법

let slider = "";
if (typeof document !== "undefined") {
  slider = document.querySelector(".items");
}

 

2) useEffect를 사용하여 컴포넌트가 렌더링 되었을 때 필요한 값을 가져오는 방법

let slider = "";

useEffect(() => {
  slider = document.querySelector(".items");
}, []);

 

위 방법은 window에서도 사용 가능하다고 한다.

---

document is not defined 에러가 뭐야? 해결법 !! (feat. window is not defined)