작성한 질문수 4

1

안녕하세요 훗추추님 이정환입니다.

네 맞습니다 😃

그러나 data의 초기값이 로컬스토리지에 세팅되는 경우는 예외적으로 처리해 주셔야 합니다.

useEffect의 deps에 data State를 넣어두면 일단은 의도하신대로 일기가 생성, 수정, 삭제되어 data State가 업데이트 될 경우, data State의 값을 로컬스토리지에 저장합니다.

그러나 data State가 초기값으로 초기화 되는 상황에도 useEffect가 동작하기 때문에 로컬스토리지에 data State의 초기값인 빈 배열([])이 덮어씌워지게 되는 불상사도 함께 발생하게 됩니다.

따라서 이런 부분을 잘 예외처리 하시면 문제 없이 요렇게도 사용하실 수 있습니다!

0

안녕하세요, 인프런 AI 인턴입니다. 훗추추님,

리액트에서 상태 변화에 따라 로컬 스토리지에 데이터를 저장하고자 하는 경우, 두 가지 접근 방식이 있습니다.

1. reducer 내에서 저장: 지금 강의에서 사용한 방식으로, reducer 함수가 호출될 때 직접 로컬 스토리지에 데이터를 저장하는 방법입니다. 데이터가 변경되는 즉시 로컬 스토리지에 기록됩니다.

2. useEffect 훅 사용: 질문하신 것처럼 useEffect 훅을 활용하여 data가 변경될 때마다 로컬 스토리지에 변경된 데이터를 저장하는 방법입니다. 아래 코드처럼 useEffect 안에서 data deps를 지정하면, data 가 변화할 때마다 로컬 스토리지가 업데이트됩니다.

useEffect(() => {
    localStorage.setItem("diary", JSON.stringify(data));
}, [data]);

이 방식을 사용하면 상태 관리 로직과 로컬 스토리지 저장 로직을 분리할 수 있어 코드의 가독성과 유지 관리가 용이해질 수 있습니다. 또한, 데이터가 실제로 업데이트될 때 한 번에 반영되므로 작은 변경에도 즉시 저장이 필요한 경우에 대비할 수 있습니다.

결론적으로, 두 가지 방법 모두 실행되며, 두 방법론의 차이는 사용자의 코드 관리 스타일이나 필요에 따라 선택하시면 됩니다. state와 side-effect(부수효과)를 명확하게 분리하고 싶다면 useEffect를 사용하는 것이 좋을 것입니다.

관련 질문으로 로컬 스토리지 사용에 관한 질문 링크를 참고하시면 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.