인프런 커뮤니티 질문&답변
작성한 질문수
로컬 스토리지에 데이터를 저장하는 시점에 대해 문의드립니다.
해결된 질문
작성
·
118
0
안녕하세요 강의 잘 듣고 있습니다!
수업 중 reducer의 마지막 부분에 localStorage.setItem()를 호출하여 로컬 스토리지에 데이터를 저장하셨는데요. 그 이유는 데이터의 생성, 수정, 삭제가 reducer 함수 호출 시 이루어지기 때문이라고 이해했습니다.
만약 reducer 내부가 아닌 아래 코드처럼 data를 deps로 가지는 useEffect안에서 데이터를 저장해도 동일하게 동작하는 것이 맞을까요?
useEffect(() => {
localStorage.setItem("diary", JSON.stringify(data));
}, [data]);답변 2
1
안녕하세요 훗추추님 이정환입니다.
네 맞습니다 😃
그러나 data의 초기값이 로컬스토리지에 세팅되는 경우는 예외적으로 처리해 주셔야 합니다.
useEffect의 deps에 data State를 넣어두면 일단은 의도하신대로 일기가 생성, 수정, 삭제되어 data State가 업데이트 될 경우, data State의 값을 로컬스토리지에 저장합니다.
그러나 data State가 초기값으로 초기화 되는 상황에도 useEffect가 동작하기 때문에 로컬스토리지에 data State의 초기값인 빈 배열([])이 덮어씌워지게 되는 불상사도 함께 발생하게 됩니다.
따라서 이런 부분을 잘 예외처리 하시면 문제 없이 요렇게도 사용하실 수 있습니다!
0
안녕하세요, 인프런 AI 인턴입니다. 훗추추님,
리액트에서 상태 변화에 따라 로컬 스토리지에 데이터를 저장하고자 하는 경우, 두 가지 접근 방식이 있습니다.
reducer내에서 저장: 지금 강의에서 사용한 방식으로,reducer함수가 호출될 때 직접 로컬 스토리지에 데이터를 저장하는 방법입니다. 데이터가 변경되는 즉시 로컬 스토리지에 기록됩니다.useEffect훅 사용: 질문하신 것처럼useEffect훅을 활용하여data가 변경될 때마다 로컬 스토리지에 변경된 데이터를 저장하는 방법입니다. 아래 코드처럼useEffect안에서datadeps를 지정하면,data가 변화할 때마다 로컬 스토리지가 업데이트됩니다.
useEffect(() => {
localStorage.setItem("diary", JSON.stringify(data));
}, [data]);
이 방식을 사용하면 상태 관리 로직과 로컬 스토리지 저장 로직을 분리할 수 있어 코드의 가독성과 유지 관리가 용이해질 수 있습니다. 또한, 데이터가 실제로 업데이트될 때 한 번에 반영되므로 작은 변경에도 즉시 저장이 필요한 경우에 대비할 수 있습니다.
결론적으로, 두 가지 방법 모두 실행되며, 두 방법론의 차이는 사용자의 코드 관리 스타일이나 필요에 따라 선택하시면 됩니다. state와 side-effect(부수효과)를 명확하게 분리하고 싶다면 useEffect를 사용하는 것이 좋을 것입니다.
관련 질문으로 로컬 스토리지 사용에 관한 질문 링크를 참고하시면 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.