Javascript에는 7개의 타입(ES6 기준으로)이 존재하는데 해당 타입들은 크게 원시타입과 객체 타입으로 분리된다.

원시타입

• boolean
• null
• undefined
• number
• string
• symbol

객체타입 (object/reference type)

• object

Object

자바스크립트 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체라 할 수 있다. 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

자바스크립트 객체는 Key와 Value로 구성된 property 들의 집합이다. 프로퍼티의 값으로 자바스크립트에서 사용할 수 있느 모든 값을 사용할 수 있다. 객체는 데이터를 의미하는 property와 데이터를 참조하고 동작을 의미하는 method로 구성된 집합이다.

객체는 데이터와 그 데이터에 관련된 동작을 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

프로퍼티

key의 제약조건

프로퍼티 키는 일반적으로 문자열을 지정한다. 프로퍼티 키에 문자열이나 symbol 이외의 값을 지정하면 암묵적으로 타입이 변환되여 문자열이 된다. 프로퍼티 키는 문자열이므로 따옴표를 사용하는데 자바스크립트 내의 예약어가 아닌 경우 따옴표를 생략할 수 있다.

→ 프로퍼티의 키는 문자열 또는 symbol이다.

value

프로퍼티 값은 모든 값과 표현식이 올 수 있으며 프로퍼티 값이 함수인 경우 이를 메소드라 한다.

반복

for-in 문을 사용하면 객체에 포함된 모든 포르퍼티에 대해 루프를 수행할 수 있다.

const person = { 
    'name' : 'namda',
    'gender' : 'male',
};

for(const prop in person){
    console.log(prop + " : " + person[prop]);
}

/*
name : namda
gender : male 
*/

→ key들의 순서는 보장되지 않는다.

(for of로는 반복문을 돌 수 없다.)

Map

자바스크립트 맵은 Object와 마찬가지로 key-value 로 구성된 data구조이며 해당 key들의 insertion에 대한 순서를 기억한다. key 값으로 어떠한 값도 사용할 수 있는데 object에서는 key 값으로 사용할 수 없었던 number와 같은 원시타입도 사용가능하다.

반복

for-of를 통해 반복할 수 있다.

const person = new Map();
person.set("name", "namda");
person.set("gender", "male");

for(const prop of person){
    console.log(prop);
}

/*
['name', 'namda']
['gender', 'male']
*/

Map data를 JSON으로 변환하기

JSON.stringify 와 JSON.parse는 각각 replacer 와 reviver 를 두번째 인자로 지원한다. replacer와 reviver를 통해 Map data를 파싱할 수 있다.

function replacer(key, value) {
  if(value instanceof Map) {
    return {
      dataType: 'Map',
      value: Array.from(value.entries()), // or with spread: value: [...value]
    };
  } else {
    return value;
  }
}

function reviver(key, value) {
  if(typeof value === 'object' && value !== null) {
    if (value.dataType === 'Map') {
      return new Map(value.value);
    }
  }
  return value;
}

const originalValue = new Map([['a', 1]]);
const str = JSON.stringify(originalValue, replacer);
const newValue = JSON.parse(str, reviver);

https://stackoverflow.com/questions/29085197/how-do-you-json-stringify-an-es6-map

Object Map 사용 결정

1. key의 타입이 run time 까지 정해지지 않은 경우

   → Map이 더 안정성을 가진다 ( key 타입으로 모든 값이 가능하므로)

2. key 값으로 원시타입을 사용할 경우

3. 각각의 element에 대한 연산이 필요할 경우 Object를 사용하자

참고자료

https://poiemaweb.com/js-data-type-variable https://poiemaweb.com/js-object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

https://stackoverflow.com/questions/18541940/map-vs-object-in-javascript

https://medium.com/front-end-weekly/es6-map-vs-object-what-and-when-b80621932373

문제상황

• Server로 부터 한달간의 거래내역 data를 받아온다.
• 한달간의 거래내역 data가 redux Store에 저장되고 이를 통해 다른 컴포넌트의 랜더링에 사용된다.
• 한달간의 총 수입, 지출 등을 api 분리를 하지 않아 전체 data를 모두 가져오는 상황
• data 자체는 모두 가지고 있는 상태에서 Rendering 자체만 끊어서 하자!

** 기술스택**

• React, Typescript, Styled-component, Redux 등

Scroll Event

처음에 시도했던 방식은 Scroll Event를 등록하여 화면 상의 scroll Top의 비율을 통해 일정 비율을 넘었을 때 랜더링하는 방식으로 구현하려 하였습니다. (지금 생각해보면 scroll 의 위치가 가장 밑으로 내려왔을 때 event를 발생시키는 방식이 더 나았을 것 같네요..) 이때 발생가능한 문제는 해당하는 기준이 device 마다 차이가 있으면 동작의 일관성이 유지되지 않는다는 점이였습니다.

추가적으로, 부스트캠프에서 저희 프로젝트 팀이 관심있게 가졌던 주제가 최적화였는데 scroll event 방식은 한 번의 스크롤에 scroll event가 여러번 발생하므로 throttle 또는 debounce를 적용하여 이러한 event가 무한히 발생하지 않도록 관리해줘야 한다는 점이었는 데, 이점에서 scroll event 자체가 매력적으로 느껴지지 않았습니다.

Intersection Observer

scroll event의 대안을 찾다가 Intersection Observer 라는 것을 알게 되었습니다.

Intersection Observer 란?

IntersectionObserver(교차 관찰자 API)는 타겟 엘레멘트와 타겟의 부모 혹은 상위 엘레멘트의 뷰포트가 교차되는 부분을 비동기적으로 관찰하는 API입니다.

ViewPort 는 사용자에게 보여지는 화면이라 생각하면 쉽습니다. 사용자의 화면과 element가 얼마나 교차되는지 비율이 계산되고, 그 비율을 threshold를 통해 콜백함수의 trigger 기준으로 정할 수 있습니다.

Intersection Observer 에 대한 설명은 MDN 과 다른 글들을 참고하시면 쉽게 이해하실 수 있습니다!

어떤 기준으로 적용할 것인가?

• 저희 프로젝트에서 거래내역 data를 랜더링할 때 일자별로 묶어서 랜더링을 해야했기 때문에 어떤 element를 observe 할지에 대한 기준을 정할 필요성이 있었습니다.
• 제가 개발과정에서 기준으로 삼았던 점은 5일 단위로 끊어서 랜더링하는 방식으로 lazy Renderig을 구현하기로 결정하였습니다. (기준에 있어서 최적의 방식을 정하진 못한 것 같습니다)

기존의 코드

import React from 'react';
import { useSelector } from 'react-redux';
import TransactionListItem from '@/components/transaction/ListItem';
import { RootState } from '@modules/index';
import { TransactionModel } from '@/commons/types/transaction';
import EmptyStateComponent from '@/components/transaction/EmptyState';
import * as S from './styles';

const TransactionListContainer = (): JSX.Element => {
  const { transaction } = useSelector((state: RootState) => state);

  return (
    <>
      {transaction.transactionDetailsByDate.length !== 0 ? (
        transaction.transactionDetailsByDate.map(([date, transactionDetails]) => (
          <S.DateContainer key={`transaction_box_${date}`}>
            <S.DateLabel>{date}일</S.DateLabel>
            {transactionDetails.map((transactionDetail) => (
              <S.TransactionListItemWrapper>
                <TransactionListItem
                  key={`transaction_${transactionDetail.tid}`}
                  transaction={transactionDetail}
                />
              </S.TransactionListItemWrapper>
            ))}
          </S.DateContainer>
        ))
      ) : (
        <EmptyStateComponent />
      )}
    </>
  );
};

export default TransactionListContainer;

• 기존의 코드는 Redux Store에 저장된 transaction 정보를 가져와서 바로 랜더링하는 방식이었습니다.

랜더링할 list를 따로 상태로 분리

• Store 에서 가져온 data 를 바로 랜더링하면 안되므로 따로 상태를 두어 그 상태에 끊어서 list를 넘겨주는 방식으로 변경하였습니다.

  const [renderedTransaction, setRenderedTransaction] = useState([] as [number, TransactionModel[]][]);

• 빈배열의 뒤에 정의된 타입은 Store에서 가져오는 data의 형식을 정의

끊어서 랜더링 되는 기준을 적용

• 5일을 기준으로 랜더링을 정의했으므로 maxLength를 store에서 가져온 거래내역 list에서 구하고 useRef를 이용하여 length 를 정의하여 현재 랜더링된 상태(얼마나 랜더링이 되었는지)를 계산 수 있도록 설정

  const length = useRef(1);
  const maxLength = transaction.aggregationByDate.length / 5;
  

- 초기의 data가 들어왔을 때 5개의 data를 랜더링에 사용할 상태에 설정

useEffect(() => { if (!transaction.loading) { length.current = 1; if (transaction.transactionDetailsByDate.length < 5) { setRenderedTransaction(transaction.transactionDetailsByDate); } else { setRenderedTransaction(transaction.transactionDetailsByDate.slice(0, 5)); } } }, [transaction]);

### Intersection Observer가 observe할 target을 정의
- useRef를 통해 target을 참조하도록 했습니다.
- 이때, 코드를 보면 ref가 랜더링 되는 모든 `DateContainer` 에 대해 이루어진다는 것을 발견할 수 있는데 제 생각에는 계속해서 컴포넌트가 랜더링 되면서 기존의 ref가 덮어씌워지고 마지막에 랜더링이 되는 element에 ref에 대한 참조가 이루어지는 것 같습니다.

const target = useRef(null);

...

return ( <> {transaction.transactionDetailsByDate.length !== 0 ? ( renderedTransaction.map(([date, transactionDetails]) => ( <S.DateContainer key={t_box_${date}${ren}} ref={target}> <S.DateLabel>{date}일</S.DateLabel> {transactionDetails.map((transactionDetail) => ( <S.TransactionListItemWrapper key={t_Wrap${transactionDetail.tid}}> <TransactionListItem key={t_${transactionDetail.tid}} transaction={transactionDetail} /> </S.TransactionListItemWrapper> ))} </S.DateContainer> )) ) : ( )} </> );

### Intersection Observer 정의 및 동작 정의
**Intersection Observer 정의**
- threshold는 0.5로 설정하였습니다. (element의 50%가 viewport에 보이면 callback 함수가 실행된다.)
- cleanup 함수를 통해 observer의 연결을 끊어줬습니다. 

useEffect(() => { let observer: IntersectionObserver; if (target.current) { observer = new IntersectionObserver(onIntersect, { threshold: 0.5 }); observer.observe(target.current as Element); } return () => observer && observer.disconnect(); }, [transaction, renderedTransaction]);

**교차시 발생할 동작 정의**
- 교차가 발생했을 때(`entry.isIntersecting === true`) 
- 현재 랜더링된 상태(`length`)가  `maxLength` 보다 크지 않다면 observer를 unobserve 하고 랜더링할 상태에 배열 5개를 추가하였습니다. 

const changeExtraTransaction = () => { const newrenderedTransaction = renderedTransaction.concat( transaction.transactionDetailsByDate.slice(5 * length.current, 5 * length.current + 5), ); length.current += 1; setRenderedTransaction(newrenderedTransaction); };

const onIntersect: IntersectionObserverCallback = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting && length.current < maxLength) { observer.unobserve(entry.target); changeExtraTransaction(); } }); };

### 전체코드

import React, { useCallback, useEffect, useRef, useState } from 'react'; import { useSelector } from 'react-redux'; import TransactionListItem from '@/components/transaction/ListItem'; import { RootState } from '@modules/index'; import { TransactionModel } from '@/commons/types/transaction'; import EmptyStateComponent from '@/components/transaction/EmptyState'; import * as S from './styles';

const TransactionListContainer = (): JSX.Element => { const { transaction } = useSelector((state: RootState) => state); const length = useRef(1); const target = useRef(null); const [renderedTransaction, setRenderedTransaction] = useState( [] as [number, TransactionModel[]][], ); const maxLength = transaction.aggregationByDate.length / 5;

useEffect(() => { if (!transaction.loading) { length.current = 1; if (transaction.transactionDetailsByDate.length < 5) { setRenderedTransaction(transaction.transactionDetailsByDate); } else { setRenderedTransaction(transaction.transactionDetailsByDate.slice(0, 5)); } } }, [transaction]);

const changeExtraTransaction = () => { const newrenderedTransaction = renderedTransaction.concat( transaction.transactionDetailsByDate.slice(5 * length.current, 5 * length.current + 5), ); length.current += 1; setRenderedTransaction(newrenderedTransaction); };

const onIntersect: IntersectionObserverCallback = (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting && length.current < maxLength) { observer.unobserve(entry.target); changeExtraTransaction(); } }); };

useEffect(() => { let observer: IntersectionObserver; if (target.current) { observer = new IntersectionObserver(onIntersect, { threshold: 0.5 }); observer.observe(target.current as Element); } return () => observer && observer.disconnect(); }, [transaction, renderedTransaction]);

return ( <> {transaction.transactionDetailsByDate.length !== 0 ? ( renderedTransaction.map(([date, transactionDetails]) => ( <S.DateContainer key={t_box_${date}${ren}} ref={target}> <S.DateLabel>{date}일</S.DateLabel> {transactionDetails.map((transactionDetail) => ( <S.TransactionListItemWrapper key={t_Wrap${transactionDetail.tid}}> <TransactionListItem key={t_${transactionDetail.tid}} transaction={transactionDetail} /> </S.TransactionListItemWrapper> ))} </S.DateContainer> )) ) : ( )} </> ); };

export default TransactionListContainer;

```

결과

• 약 800개의 거래내역 data를 가지고 chrome 개발자 도구로 performance를 체크하였을 때 위와같은 변화를 보였습니다. (체감상으로도 훨씬 빨라졌다)

고려할사항

• Intersection Observer API 는 IE에 지원되지 않습니다.

• pollyfill 을 적용시켜주자

참고자료

• Intersection Observer MDN
• https://developers.google.com/web/updates/2016/04/intersectionobserver