[TIL][23.11.15] React 팬레터 앱 만들기 - 2

요약

Ract로 Fan Letter App 만들기 - 2

localstorage를 이용하여 가상 DB를 만들어 데이터 전달 및 수정 삭제

---

고민한 내용

 

useState로 작업을해서 props로 넘길까 생각을 하다가 어차피 새로고침해도 데이터가 남아있는게 더 보기 좋을거 같단 생각에 localstorage를 담아 리스트로 업데이트하며 뿌려주기로 했다.

 

 

1. Main.jsx

 

기본적인 임의의 data를 몇개 만들고 담는다. 그 이후부터는 남겨져 있는 localStorage 데이터로 확인을 한다.

그리고 기본 배열이 변화될 때마다 새롭게 useEffect로 lists의 변화를 감지해 setItem을 했다

 

import data from "../fakeData.json";
function Main() {

  // 기존 최초 배열
  const [lists, setLists] = useState(
    // localStoage가 없을시 기본 데이터
    JSON.parse(localStorage.getItem("watched")) || data
  );
  
  // 초기 설정
  useEffect(() => {
    const storedLists = JSON.parse(localStorage.getItem("watched"));
    if (storedLists) {
      setLists(storedLists);
    }
  }, []);
  
  // 리스트 변경될 때마다 Local Storage에 저장하는 함수 추가
  useEffect(() => {
    localStorage.setItem("watched", JSON.stringify(lists));
  }, [lists]);
}

 

 

그리고 새롭게 리스트가 추가 될 때(submitHandler)마다 setLists와 localStorage.setItem을 동시에 진행했다.

  const submitHandler = (e) => {
    e.preventDefault();
    const today = new Date();
    setLists([
      ...lists,
      {
        ...list,
        id: uuid(),
        createdAt: today.toJSON(),
        img: "img-icon-" + list.writedTo + ".png",
      },
    ]);
    setList({ ...initialState, writedTo: list.writedTo });
    localStorage.setItem(
      "watched",
      JSON.stringify([
        ...lists,
        {
          ...list,
          id: uuid(),
          createdAt: today.toJSON(),
          img: "img-icon-" + list.writedTo + ".png",
        },
      ])
    );
  };

 

 

2. Detail.jsx

detail 페이지로 넘어가면서 리스트 정보가 담김 param을 같이 넘겨주면서 detail의 리스트 정보를 가져왔다. 같은 방법으로 localStorage로 그 해당 detail의 index를 미리 담아놨다

  const param = useParams();

  // detail
  const detail = lists.find((item) => item.id === param.id);
  // detail의 index 찾기
  const detailIndex = JSON.parse(localStorage.getItem("watched")).findIndex(
    (item) => item.id === param.id
  );

 

위에서 찾은 detail의 index를 통해서 수정 및 삭제를 했다.

삭제를 할 때는 commentsJSON.splice(detailIndex, 1);

이외의 코드는 모두 같다

  const editSubmit = () => {
    if (desc === detail.content) return alert("수정된 부분이 없습니다");
    // json을 객채화
    const commentsJSON = JSON.parse(localStorage.getItem("watched"));
    // 해당 요소 찾아서 수정
    commentsJSON[detailIndex].content = desc;
    // 해당 키 지우고 새롭게 입히기
    localStorage.removeItem("watched");
    localStorage.setItem("watched", JSON.stringify(commentsJSON));
    setLists(commentsJSON);
    setEditCheck(false);
    navigate("/");
  };

 

---

결과 화면

---

회고

 

javascript에서 localStorage를 사용해봤었는데 리액트에서도 똑같이 사용할 수 있어서 좋았다. 다른 점이 있다면 javascript에서는 화면상 새로고침한 것처럼 화면만 바뀌게 보이게 했었던 것인데, react는 SPA 특성상 바로바로 데이터가 화면에 뿌려질 수 있다는 점이 확연히 달라서 좋았다. localStorage 없이 useState로도 해보고 싶었는데, 뒤로가기나 버튼 클릭이 아닐 때 데이터 넘기는게 쉽지 않아서 useHistory도 테스트해봤는데 잘 되지 않아서 이후에 다시 한번 리펙토링 해봐야겠다.