[React - Project] 지출 기록 서비스 구현하기 | Issue & Solution

📚 구현한 기능

 

1. 오늘 날짜 표시

2. 지출 등록

3. 등록된 지출 삭제

4. 현재까지 등록된 지출의 총합 표시

5. 카테고리별 정렬

 

 

📚  Issue & Problem & Solution

 

1. item출력 시 category명이 select value로 받아와서 영어로만 출력되었다. 

 

→ category 데이터 별 label을 지정하여 따로 데이터를 관리하기

 

const options = [
  { label: '식사', value: 'meal' },
  { label: '식료품', value: 'food' },
  { label: '교통', value: 'traffic' },
  { label: '생활', value: 'life' },
  { label: '의료', value: 'medical' },
];

export default options;

 

정말 도저히 한글로 출력이 안돼서 마지막에는 태그의 value를 한글로 바꿔버리고 싶다는 생각까지 들었지만..^^ 각 value에 대치되는 한글 데이터를 만들어서 category가 출력되는 컴포넌트에서 불러왔더니 한글로 아주 잘! 출력되었다.

→ 항상 현재 상태에서 해결하려 하기보다, 새로운 데이터를 만들고 가져와서 사용하는 것을 생각하는 일이 왜 이리 어려울까 🤦‍♀️

 

 

2. category 정렬 불가..

 

- category component에서 데이터를 만들어서 list 또는 item에 넘기는 방법을 모르겠음

 

const initialExpense = {
  data: [
    {
      id: 1,
      title: '용개반점',
      category: 'meal',
      amount: 7000,
    },
	...
  ],
  currentFilter: 'all',
  filterCategory: [],
};

 

→ user가 선택한 value는 제대로 출력됐지만, 그에 따라 카테고리가 정렬되는 기능은 구현하지 못했었다.

이 또한 위 해결법처럼 카테고리 정렬에 필요한 데이터를 초기 데이터 값에 따로 만들어두는 것이 포인트였다. 

본래 내가 작성한 초기 데이터에는 list로 출력될 예시 데이터만 들어있는 형태였는데, 카테고리 정렬에 따른 데이터를 담아둘 배열 또한 초기 데이터에 넣어서 context로 관리하는 게 합리적인 방법이었다.

 

+ filter 액션은 immer 라이브러리를 사용하여 불변성을 지켰다. 

 

 

3. 2번의 이슈를 해결하면서 새로운 문제가 생겼다. 본래 잘 동작하던 onCreate와 onRemove의 액션이 동작하면 초기 데이터 값이 undefined으로 출력되었다.

 

case 'REMOVE':
  return {
    ...state,
    data: state.data.filter(expense => expense.id !== action.id),
  };

 

→ 이는 `초기 데이터를 list로 출력될 예시 데이터만 들어있는 형태에서 → category 데이터도 추가`하면서 바로 state에서 메서드를 사용하지 않고, state.data를 조회하여 배열 메소드를 사용하면 될 줄 알았다. 그런데 액션이 발생하면 data의 값이 undefined로 출력되며 해당 액션들은 동작하지 않고 에러를 뿜어냈다...

 

→ 이전에는 잘 동작하던 코드가 갑자기 에러가 생기니 혼자서 절대 해결이 안 돼서 결국 질문하여 답변을 받았다.

 

 `액션을 통해 변경할 때 초기 state를 무조건 불러오고 → 따로 변경을 진행하기`

→→... state를 통해 초기 데이터를 그대로 가져오고 그 안에서 state.date값만 따로 변경해주기

 

알고 보니 불변성에서 문제가 생긴 것이었다.. state를 그대로 가져오고 state.data에 이전에 사용하던 코드를 넣으니 정상적으로 다시 동작했다..!!!

 

 

** 참고 링크 공부하기 **

React state가 불변이어야 하는 이유

 

---

 

3. item 수정 아이콘 클릭 시 현재 input의 value는 받아오는데 ohChange가 안됨. 

→ 이건 아직 왜 그러는지 몰라서 수정을 못했다.ㅜㅜ 

+ 3. context에서 reducer 함수 작성 시, update 로직을 제대로 짠 건지 모르겠음

4. bug - input 값이 없을 때도 create가 진행됨