( ⚠️ 이전 포스팅과 이어지는 내용입니다. )
0️⃣ 들어가기에 앞서
이전 포스팅에서는 Context API를 사용한 CRUD를 구현해 봤습니다. 그러나 완전한 게시판의 형태는 아닙니다. 왜냐하면 새로고침을 하는 순간... 내용이 다 날라가기 때문이죠..
(👇 새로 고침 하기 전)
(👇 새로 고침 후 )
기껏 추가해둔 내용을 살리기 위해 FE 에서는 localStorage 를 사용하게 됩니다! 그래서 이번 파트에서는 localStorage 를 추가적으로 사용하여 완전한 보드를 구현해보도록 하겠습니다.
1️⃣ localStorage 란?
먼저 JS 를 사용한 웹 저장소에는 크게 두가지가 있습니다.
LocalStorage VS SessionStorage
이 둘의 가장 큰 차이점은 데이터가 얼마나 오래 보존되는지에 있습니다.
세션 스토리지 : 웹페이지의 세션이 끝날 때 저장된 데이터가 지워짐.
로컬 스토리지 : 웹페이지의 세션이 끝나더라도 지워지지 않음.
👉 즉 웹창을 닫으면 세션 스토리지 데이터 ❌ but 로컬은 그대로 남아있음 👌
그렇다면 직접 웹에서 확인해 봅니다. F12를 눌러 검색해보면
( 👇 아래와 같이 로컬 저장소를 찾아 볼 수 있습니다. key,value로 구성 되어 있네요!)
그렇다면 이제 book 데이터를 로컬에 옮기는 작업을 해보도록 하겠습니다.
2️⃣ localStorage 저장, 불러오기
//BookContext.js
function BookContextProvider(props) {
const [books, dispatch] = useReducer(bookReducer,[], ()=>{
const localData = localStorage.getItem('books');
return localData ? JSON.parse(localData) : [] // 있으면 가져옴
});
useEffect(()=>{
localStorage.setItem('books',JSON.stringify(books))
},[books])
//추가하거나 삭제하면 작동
return(
<BookContext.Provider value ={{books, dispatch}}>
{props.children}
</BookContext.Provider>
)
/* */
}자체적으로 localStorage 함수가 내장 되어 있기때문에 아주 쉽게 사용이 가능합니다.
이렇게 로컬에 저장을 하면 새로고침해도 값이 변하지 않는 완벽한 CRUD 게시판을 만들었습니다.
3️⃣ 프로젝트를 마무리하며...
요즘 이슈였던 Context API를 개념에서 토이 프로젝트를 진행하며 체화할 수 있도록 노력해봤는데요. 확실히 Redux 보다 상태 관리 면에서는 아주 간단했던것 같고, hook + context + TS의 조합이 너무 기대되는 기술이었습니다! react의 매력적인 점이 게임처럼 꾸준한 업데이트로 과거의 것을 새롭고 더 편하게 만드는 것에 있다고 생각이 들었습니다. 앞으로가 기대되고 더욱 성장하는 개발자가 되도록 노력하겠습니다!
