[Today I Learned] 1월 4주차 day4

다른페이지에서 dispatch를 보낸 후 actionpayload로 값을 받아서 데이터를 가공하는 코드이다.

initialState는 빈배열로 두고 , 가공한 데이터를 state = newArr; 로 로직을 구현했다.
하지만 이렇게 짜버리면 state에서는 값이 잘 나오지만

const musicgenre = [
  ["RNB힙합", "인디음악", "뉴에이지", "로파이", "발라드"], //감성
  ["외국힙합", "시티팝", "아이돌댄스곡", "디스코펑크"], //드라이브
  ["뉴에이지", "로파이"], // 공부
  ["외국힙합", "아이돌댄스곡", "시티팝"], // 운동
  ["아이돌댄스곡", "시티팝", "외국힙합"], // 기분전환
];

const initialState: String[] = [];

const categorySlice = createSlice({
  name: "categories",
  initialState,
  reducers: {
    getCategories: (state, action) => {
      let newArr: any = [];
      for (let i = 0; i < musicgenre[action.payload].length; i++) {
        newArr.push(musicgenre[action.payload][i]);
      }
      state = newArr;

    },
  },
});

아래의 코드에서 console.log를 찍어보면 빈배열의 값을 뱉어낸다.

const Main = () => {
  const datas = useAppSelector((state) => state.categories);
  console.log(datas);

문제는 state = newArr; 이부분에 있었다. 객체나 배열 데이터를 다룰때에는 불변성을 지켜줘야한다. 해결방법은 이렇다.

return newArr; 

or

state.push(newArr);

바로 return을 해주던가, state에 push메서드를 활용해 값을 직접 넣어주는것이다.

아직 데이터불변성에 대한 지식이 부족한것 같아서 이런 실수를 한것같다..
프로젝트도 중요하지만 항상 js 기본기를 갈고 닦자!

추가로 위의 코드를 typescript문법중에 as를 이용하여 코드를 간추려 봤다.

type gengre = "감성" | "드라이브" | "공부" | "운동" | "기분전환";

const musicgenre = {
  감성: ["RNB힙합", "인디음악", "뉴에이지", "로파이", "발라드"],
  드라이브: ["외국힙합", "시티팝", "아이돌댄스곡", "디스코펑크"],
  공부: ["뉴에이지", "로파이"],
  운동: ["외국힙합", "아이돌댄스곡", "시티팝"],
  기분전환: ["아이돌댄스곡", "시티팝", "외국힙합"],
};

const initialState: String[] = [];

const categorySlice = createSlice({
  name: "categories",
  initialState,
  reducers: {
    getCategories: (state, action) => musicgenre[action.payload as gengre],
  },
});