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

오늘은 코드정리를 할 예정이다.

 

지금 작성한 코드의 문제점들은

1. [object1, object2....] 배열 요소를 각각의 배열로 변화시키는게 너무 많다.

  // 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));

 

이것만 40줄이 넘어간다..

목표는 10줄이내로 끊는 것이다.

Object.entites() 를 이용해 최소화 시킬 예정이다.

 

2. 변수와 props 들이 너무 많다.

Flutter 로 앱을 개발했을 때에도 props 들이 너무 많아서 복잡해보였다.

이를 해결하기 위해 props들을 Array 형태로 묶어서 최소화시켰는데,

React 커뮤니티를 보니 Redux를 이용하면 용이하다고 한다.

Redux 사이트 docs 를 보면서 이용할 예정이다.

 

3. 코드가 1개의 tsx 파일에 작성되어있다.

components 들은 components 폴더에, container 들은 containers 폴더에 분류시킬 예정이다.

 

4. function 함수들이 길어서 container 또는 page 코드들의 가독성이 떨어진다.

이 역시 ts 파일에 한데로 묶어서 export 할 예정이다.

 

 

일단 redux 를 실제로 사용해보면서 적용해야겠다.

yarn add redux react-redux @types/react-redux
또는 npm