오늘 한 일

개인프로젝트 진행
└ 코드 정리
└ localstorage 저장

오늘 공부한 내용

✅ 팬레터 로컬스토리지에 저장하기

✔ 저장

• localStorage.setItem('key', value)
• 객체를 저장할 것이므로 JSON.stringify() 해주기
• 추가/수정/삭제시 업데이트 된 fanLetters 목록 각각 저장
• 각 액션마다 저장되는 로직이 같기 때문에 함수로 빼줌(saveToLocalStorage)

const saveToLocalStorage = (updatedFanLetter) => {
  localStorage.setItem('fanLetters', JSON.stringify(updatedFanLetter));
};

const FanLetterReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_FANLETTER:
      const newFanLetterList = [action.payload, ...state];
      saveToLocalStorage(newFanLetterList);
      return newFanLetterList;

    case EDIT_FANLETTER:
      const editedFanLetterList = state.map((item) =>
        item.id === action.payload.id
          ? { ...item, content: action.payload.editInput }
          : item
      );
      saveToLocalStorage(editedFanLetterList);
      return editedFanLetterList;

    case DELETE_FANLETTER:
      const deletedFanLetterList = state.filter(
        (item) => item.id !== action.payload
      );
      saveToLocalStorage(deletedFanLetterList);
      return deletedFanLetterList;

    case SET_FANLETTER:
      return action.payload;

    default:
      return state;
  }
};

✔ 가져오기

• localStorage.getItem('key')
• 팬레터를 렌더링 하는 컴포넌트인 FanLetterList.jsx에서 useEffect로 불러오기
• 문자열 형태로 저장된 데이터를 다시 객체로 변환 JSON.parse()
• setFanLetters 액션을 dispatch로 발생시켜 localStorage에 값이 있으면 fanLetters 가져오기
• dispatch가 일어날 때마다 useEffect 재실행

const FanLetterList = () => {
  const dispatch = useDispatch();
  let fanLetters = useSelector((state) => state.FanLetterReducer);
  const selectedMember = useSelector((state) => state.SelectedMemberReducer);
  const filteredLetters = fanLetters.filter((item) =>
    selectedMember !== '전체' ? item.writedTo === selectedMember : true
  );

  useEffect(() => {
    const storedFanLetters = JSON.parse(localStorage.getItem('fanLetters'));
    if (storedFanLetters) {
      dispatch(setFanLetters(storedFanLetters));
    }
  }, [dispatch]);

  return (
    <ScFanLetterItems>
      (...)
    </ScFanLetterItems>
  );
};

✅ 수정상태일 때 입력창에 focus 주기

• 수정상태일 때 useRef로 textarea에 focus 주기
• textarea에 ref 속성 연결

  useEffect(() => {
    if (editInputShown) {
      editInputRef.current.focus();
    }
  }, [editInputShown]);

 <textarea
   ref={editInputRef}
   value={editInput}
   onChange={editInputHandler}
/>

✅ readme 작성

readme 쓰는 것도 연습이 필요하겠다 싶어서 이번 프로젝트 깃헙에 넣어봤다
대단한 내용을 쓴 것도 아닌데 시간을 꽤 잡아먹었다ㅎㅎ
가능하다면 배포까지 해서 제출해야지

어려웠던 내용

✅ 공용 모달 만들기

이번 과제에서 모달은 결국 포기하기로 했다
컴포넌트마다 따로 만들자니 비효율적이기도 하고
상황에 따라 늘어나는 버튼 종류와 함수들을 어떻게 만들지 감이 오질 않았다
redux 에서 전역에서 쓰이는 모달로도 만들고 싶었는데 아직은 무리였나보다
나중에 다시 도전해봐야지!

느낀점

늘 그랬듯.. 계획보다 못미치는 정도지만
주말에 공부를 했다는 점에 의의를.. 🥴