nextJS는 SSR 기반이기 때문에 CSR와 달리 window에 접근할 수 없다. 따라서 일반적인 방식으로 사용한다면 에러가 난다.
nextJS에서 localStorage 또는 sessionStorage를 사용할 땐 랜더링이 이루어 진 후 사용할 수 있다.
함수형 컴포넌트일 경우 useEffect, 클래스형 컴포넌트일 경우 componentDidMount 함수 안에서 사용해주면 된다.
componentDidMount(){
if(this.state.path==="/businessMain"){
this.setState({
companyName:localStorage.getItem("companyName")
})
}
}
위와 같이 사용해주면 된다.
기본적으로 ["key", "value"]의 쌍으로 이루어져 있으며
저장할 땐 localStorage.setItem, 사용할 땐 localStorage.getItem을 사용한다.
기본적으로 String 형이므로 object로 사용하고자 할 땐 JSON.stringify, JSON.parse와 함께 사용해주면 된다.
'React.js' 카테고리의 다른 글
| [React] selectBox 직접 구현하기 (0) | 2022.04.26 |
|---|---|
| [React] Modal창 생성하기 (0) | 2022.04.20 |
| [React] 이미지 업로드 및 미리보기 (0) | 2022.04.05 |
| [React] checkBox 기능 구현 시 setState 관련 이슈 (0) | 2022.04.04 |
| [React] nextJS에서 채널톡 서비스 이용하기 (0) | 2022.03.30 |