[React] 직접 주가 캔들 차트 만들기 - 코드정리2

전 글에서 코드의 문제점들을 해결한다고 언급한 바가 있다.

 

https://bugerstory.tistory.com/39

[React] 직접 주가 캔들 차트 만들기 - 코드정리1 (SVG 연습용), (차트라이브러리 x)

 

결과부터 말하면 700 줄이나 되던 handmade-chart.tsx 코드는 100줄로 줄일 수 있었다.

먼저 해결한 것은 데이터 배열을 분류시키는 코드를 단축시킨 것이다.

 

 

전에 코드는

// array 데이터들 분류
const stockOpen = stockArray.map((item) => item.open);
const openArray: number[] = [];
stockOpen?.forEach((open) => openArray.push(open));

const stockClose = stockArray.map((item) => item.close);
const closeArray: number[] = [];
stockClose?.forEach((close) => closeArray.push(close));

const stockVolume = stockArray.map((item) => item.volume);
const volumeArray: number[] = [];
stockVolume?.forEach((volume) => volumeArray.push(volume));

const stockDate = stockArray.map((item) => item.date);
const dateArray: string[] = [];
stockDate?.forEach((date) => dateArray.push(date.toString()));

const stockHigh = stockArray.map((item) => item.high);
const highArray: number[] = [];
stockHigh?.forEach((high) => highArray.push(high));

const stockLow = stockArray.map((item) => item.low);
const lowArray: number[] = [];
stockLow?.forEach((low) => lowArray.push(low));

const stockName = stockArray.map((item) => item.code_name);
const nameArray: string[] = [];
stockName?.forEach((name) => nameArray.push(name));

const stockClo5 = stockArray.map((item) => item.clo5);
const clo5Array: number[] = [];
stockClo5?.forEach((clo5) => clo5Array.push(clo5));

const stockClo20 = stockArray.map((item) => item.clo20);
const clo20Array: number[] = [];
stockClo20?.forEach((clo20) => clo20Array.push(clo20));

const stockClo60 = stockArray.map((item) => item.clo60);
const clo60Array: number[] = [];
stockClo60?.forEach((clo60) => clo60Array.push(clo60));

 

이렇게 길었지만,

 

export const dataToArray = (dataArray: any[], order: number) => {
  const resultArray: any[] = [];
  dataArray
    .map((item) => item[order])
    .forEach((item) => resultArray.push(item));
  return resultArray;
};

 

이 함수 하나를 만들어 요약시켰다.

여기서 중요한 것은 [Object] 형식의 데이터 배열을 [value] 형식으로 변환시켰다는 점이다.

그리고 배열의 value 순서를 이용해 데이터를 분류시켰다.

(Object의 key 값을 이용해 데이터를 분류시키려 했지만 map 을 사용하는 과정에서 인수들을 가져올 수 없었다 ㅠㅠ)

 

두 번째로 handmade-chart.tsx 의 차트 컴퍼넌트들을 모두 컴퍼넌트 폴더에 옮겨주었다.

 

세 번째로 함수들을 모두 functions 폴더에 넣어 exports 시켜주었다.

이것으로 좀 더 가독성이 좋아졌다.

 

네 번째로 gql Query 문을 모두 gql-query 폴더로 옮겨주었다.

 

마지막으로 해야할 일은 Redux 를 이용해 type을 불러올 필요 없게 만드는 것이다.

현재 Redux 공식 사이트 예제 등을 공부했으며, 실제 적용할 예정이다.

 

https://github.com/act99/stock-frontend

GitHub - act99/stock-frontend: Stock Chart & Livechat on website. For education & testing