1. 자료구조?

1.1 리팩토링 이유

2. 효율적인 자료구조로 개선하기

3. 데이터를 사용할때 얼마나 편해졌는지 비교하기

3.1 게임페이지에서 src/page/GamePage.tsx

3.2 슬롯머신 커스텀 훅에서 src/hooks/useSlot.ts

4. 마치며

1. 자료구조?

데이터에 편리하게 접근하고 변경하기 위해 데이터를 저장하거나 조작하는 방법

• 학습: 프론트엔드와 자료구조

1.1 리팩토링 이유

슬롯머신 기능을 구현하면서, 상수데이터인 MOVIE_SLOTOPTION를 가져다 쓸때마다 불편함을 느꼈다. 다시말해, 이 데이터를 쓰기 위해서 불필요한 코드들이 계속 추가됐다. 기능은 구현했으나, 찜찜했다.

함께 데이터를 가져다 쓸 동료들이 있다고 가정하고, 활용하기 편한 자료구조로 개선해보고자 한다.

2. 효율적인 자료구조로 개선하기

배열형태로 따로따로 관리하던 상수데이터를 한 객체에 담아 다같이 관리한다. 객체 데이터에 접근할때는 Object.xx 메서드를 활용하면 도니다.

• 전

  // src/constants/slotOption.ts
  export const SLOT_MOVIE_COUNTRY: string[][] = [
    ['국내', 'K'],
    ['외국', 'F'],
  ];
  export const SLOT_MOVIE_YEAR: string[][] = [
    ['2022', '2022'],
    ['2021', '2021'],
    ['2020', '2020'],
    ['2019', '2019'],
    ['2018', '2018'],
  ];
  
  export const SLOT_MOVIE_TYPE: string[][] = [
    ['상업영화', 'N'],
    ['다양성영화', 'Y'],
  ];
  

• 후

  // 한 객체에 담았다.
  export const MOVIE_SLOTOPTION = {
    country: {
      K: '국내',
      F: '외국',
    },
    year: {
      2022: '2022',
      2021: '2021',
      2020: '2020',
      2019: '2019',
      2018: '2018',
    },
    type: {
      N: '상업영화',
      Y: '다양성영화',
    },
  };
  

3. 데이터를 사용할때 얼마나 편해졌는지 비교하기