[Today I Learned] 1월 4주차 day5

프로젝트를 하면서 그간 구현하는 것에만 집중했는데,
점점 프로젝트기간이 늘어짐에 따라서 코드를 간결하고 효율적으로 짜려고 노력중이다.
최대한 하드코딩을 하지 않으려고 노력중이다.

리팩토링 전 코드 1

    switch (data) {
      case "뉴에이지":
        id = "PL31nVK1Q1BfFRnClXGE5CoHp6UlXqX6Pd";
        return dispatch(getMusic(id));
      case "발라드":
        id = "PL31nVK1Q1BfEvIGvQqw064187wHtsUaWP";
        return dispatch(getMusic(id));
      case "아이돌댄스곡":
        id = "PL31nVK1Q1BfFMgv_jjzaPHpPGpeh_5WdA";
        return dispatch(getMusic(id));
      case "시티팝":
        id = "PL31nVK1Q1BfF4pgbrGpZ11hZivbnag3Ic";
        return dispatch(getMusic(id));
      case "인디음악":
        id = "PL31nVK1Q1BfFsOJhlT2HupygWQU1L6kOv";
        return dispatch(getMusic(id));
      case "RNB힙합":
        id = "PL31nVK1Q1BfHlnPTrRFakc6Dle9aoW6Fo";
        return dispatch(getMusic(id));
      case "외국힙합":
        id = "PL31nVK1Q1BfHKuvkLSs_yR6YZ3sjp1qiR";
        return dispatch(getMusic(id));
      case "디스코펑크":
        id = "PL31nVK1Q1BfHQkWyTPYxen65D_H5XaDCo";
        return dispatch(getMusic(id));
      case "재즈":
        id = "PL31nVK1Q1BfF3rvKxLqo5FuIcMbjTf5k3";
        return dispatch(getMusic(id));
      case "로파이":
        id = "PL31nVK1Q1BfHDVl1BJAO2lb8cWe-9I2un";
        return dispatch(getMusic(id));
    }

누가봐도 보기 좋지 않은 코드이다. 가독성도 떨어지고 코드의 효율도 떨어진다.
dispatch(getMusic(id)) 부분을 한번만 호출시킬 수 있게 다시 리팩토링 했다.

리팩토링 후 코드 1

  interface IMap {
    [key: string]: string;
  }

  const idMap: IMap = {
    뉴에이지: "PL31nVK1Q1BfFRnClXGE5CoHp6UlXqX6Pd",
    발라드: "PL31nVK1Q1BfEvIGvQqw064187wHtsUaWP",
    아이돌댄스곡: "PL31nVK1Q1BfFMgv_jjzaPHpPGpeh_5WdA",
    시티팝: "PL31nVK1Q1BfF4pgbrGpZ11hZivbnag3Ic",
    인디음악: "PL31nVK1Q1BfFsOJhlT2HupygWQU1L6kOv",
    RNB힙합: "PL31nVK1Q1BfHlnPTrRFakc6Dle9aoW6Fo",
    외국힙합: "PL31nVK1Q1BfHKuvkLSs_yR6YZ3sjp1qiR",
    디스코펑크: "PL31nVK1Q1BfHQkWyTPYxen65D_H5XaDCo",
    재즈: "PL31nVK1Q1BfF3rvKxLqo5FuIcMbjTf5k3",
    로파이: "PL31nVK1Q1BfHDVl1BJAO2lb8cWe-9I2un",
  };

  const onClickHandler = (data: any) => {
    const id = idMap[data];
    dispatch(getMusic(id));
  };

interface로 타입을 지정하였고 객체에 key : value형태로 키워드와 api키를 만들었다.
idMap[data] 에서 data 값은 key값중에 하나이므로 id에 값을 할 당 후 getMusic(id)를
dispatch 한다.

리팩토링 전 코드 2

어제 짰던 코드를 다시 리팩토링 했다. 기존 type으로 지정한 부분을, interface로 만들어서 변수 musicgenre에 타입을 다시 지정 하였다.

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

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

const initialState: String[] = [];

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

리팩토링 후 코드 2

as 문법까지 쓸 필요 없이 action.payload 값을 받아서 해당 객체의 value 값을 리턴하게 코드를 구현했다.

interface IMap {
  [key: string]: any;
}

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

const initialState: String[] = [];

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

useEffect unmount시 업데이트 시키는법

useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

useEffect 에서는 함수를 반환 할 수 있는데 이를 cleanup 함수라고 부름.
cleanup 함수는 unmount 될때 return문이 실행 됨.
deps 가 비어있는 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다.

즉 useeffect의 unmount가 될 때, 다른 페이지로 이동하거나 다른 컴포넌트로 이동 시 함수를 호출 해서 data를 get/set 할 수 있다.

  useEffect((): any => {
    return () => dispatch(resetPlaylist()); //unmount 될때 return문이 실행 되고 callback으로 dispatch 보내줌
  }, []);