[React] 새로고침 시 값 유지하기(feat.localStorage)

카카오테크캠퍼스 과제를 수행하던 중 새로고침 시 값이 변경되지 않도록 하는 방법이 궁금해 찾아보았다.

 

기존 코드

const [todos, setTodos] = useState([])
const [filter, setFilter] = useState('all')
...

<div className="lists">
	<div className="input">
    	<TodoInput addTodo={addTodo} />
    </div>
    {todos.length > 0 && (
     	<div className="list-wrapper">
        	<TodoItemList 
           		todos={filteredTodos} 
                toggleTodo = {toggleTodo} 
                removeTodo={removeTodo}
                filter = {filter}
                setFilter = {setFilter}
             />
             <Footer incompleted = {incompletedTodosCount} clearCompletedItem={clearCompletedItem} length = {todos.length}/>
        </div>
     )}
            
</div>

 

기존코드는 사용자로부터 TodoInput을 받아와서 addTodo 함수를 통해서 새로운 리스트를 형성한다. 

텅..

 

이 로직은 addTodo 함수를 통해 input으로 받은 값을 띄우는 것일 뿐이다.

그래서 브라우저의 local storage 영역에 들어가면 아무런 값이 저장되어 있지 않다.

그래서 새로고침을 하면 모든 내용이 reset 되는 것이 당연하다.

 

 

새로고침을 해도 내가 설정한 값들이 유지되려면 어떻게 해야 할까?

 

수정 코드

const savedTodos = JSON.parse(localStorage.getItem('todos')) || []

const [todos, setTodos] = useState(savedTodos)
const [filter, setFilter] = useState('all')

useEffect(() => {
	localStorage.setItem('todos', JSON.stringify(todos))
}, [todos])

 

결론부터 말하면, localStorage를 사용해서 새로고침해도 작성한 TodoList가 사라지지 않도록 했다.

 

localStorage는 브라우저에 key-value 형태로 데이터를 반영구적으로 저장한다. 그래서 브라우저를 종료 후 재시작해도 데이터가 남아있고 다른 창과 브라우저를 통해서도 데이터에 접근할 수 있다.

 

아래 사진을 보면 브라우저 local storage 영역에 데이터가 잘 저장된 모습을 확인할 수 있다.

새로고침해도 값이 변하지 않고, 브라우저를 껐다가 켜도 여전히 값이 존재한다.

 

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage