React ToDoList | 새로고침 시 항목 유지 기능 만들기

새로고침해도 항목이 유지되는 기능을 추가하고 싶어져서 localStorage를 사용해 구현해보고자 했다.

초기 코드

export default function TodoTemplate() {
	const [todos, setTodos] = useState([
    	{ id: 1, text: "react 강의 듣기", done: true },
        { id: 2, text: "ts 강의 듣기", done: false },
        ])
	.
    .
    .
    useEffect(() => {
    	const todoItems_local = localStorage.getItem("todoItems");
    	if (todoItems_local) {
      	setTodos(JSON.parse(todoItems_local));
    	}
  	}, []);

  	useEffect(() => {
    	if (todos) {
      	localStorage.setItem("todoItems", JSON.stringify(todos));
    	}
  	}, [todos]);
    .
    .
    .
}

localStorage에 저장되는 건 확인이 되는데 새로고침 시 계속 초기값으로 돌아갔다😥
'왜 안돼...?'만 오백번 생각하다가 아..!하고 꺠달음을 얻고 바로 수정에 들어갔다.

수정한 코드

	.
    .
    .
    
const [todos, setTodos] = useState(
    localStorage.getItem("todoItems")
      ? JSON.parse(localStorage.getItem("todoItems"))
      : [
          { id: 1, text: "react 강의 듣기", done: true },
          { id: 2, text: "ts 강의 듣기", done: false },
        ]
)	
	.
	.
	.

useState 초기값을 스태틱하게만 주었던 게 새로고침 시 계속 초기값으로 돌아갔던 이유였다!
삼항 연산자를 이용하여 localStorage에 "todoItems"값이 있다면 그 값을, 없다면 지정한 초기값을 넣도록 코드를 변경하니 내가 원하는 결과가 나왔다😁😁