[client] 이미지 아이콘 lazy 테스트

[dlgustn555]

작업 브랜치: feature/15_test_lazy

의문.

IconComponent 에서 lazy()함수안에 Promise로 감싼 이유는 무엇일까?

• 해당 파일이 없는 경우의 처리를 위해서 일까?

  • promse로 요청을 보내서 해당 리소스가 없으면 excepiont을 발생시켜 try-catch 로 잡아서 처리해 주기 위함 일까?

• Promise로 처리 안하고 그냥 일반적으로 처리하고, 해당 파일이 없는 경엔 어떤 일이 발생 되어질까??

import React, {lazy, memo} from 'react'

const Icon = (props) => {
    /*
     * 작성일시(2020.03.13.) 기준으로 type + props bypass로 모든 case를 사용하고 있다.
     * 이를 위해 사용하던 import + switch 조합이 프로젝트가 커지면 충돌 해소 병목 지점 중 하나가 되고 있어 개선안 마련
     * */
    /* import IconAccountCheck from './IconAccountCheck'
    switch (props.name) {
        case 'IconAccountCheck':
            return <IconAccountCheck {...props} />
        default:
            return ''
    } */

    const {name} = props

    const IconComponent = lazy(() =>
        new Promise((resolve) => {
            resolve(import(`./${name}`))
        }).catch((e) => {
            console.log('Error on lazy:')
            console.error(e)
            return {
                // 로드에 실패하면 이하 엘리먼트를 대신 사용한다.
                default: () => (
                    <span
                        style={{
                            fontSize: '10px',
                            color: 'red',
                            align: 'center',
                            backgroundColor: 'rgba(255,0,0,0.15)'
                        }}>
                        {name}
                    </span>
                )
            }
        })
    )

    return (
        <React.Suspense fallback={<span style={{display: 'none'}} />}>
            <IconComponent {...props} id={`${name}_${Date.now()}`} />
        </React.Suspense>
    )
}

const areEqual = (prevProp, nextProp) => {
    return JSON.stringify(prevProp) === JSON.stringify(nextProp)
}

export default memo(Icon, areEqual)

[dlgustn555]

https://ko.reactjs.org/docs/code-splitting.html#reactlazy

React.lazy는 동적 import()를 호출하는 함수를 인자로 가집니다. 
이 함수는 React 컴포넌트를 포함하며 default export를 가진 모듈로 결정되는 Promise로 반환해야 합니다.

[dlgustn555]

1.SVG 파일들을 레이지 처리하기 위해서 Icon 함수형 컴포넌트 생성 2.

• lazy(() => import('./{name}') 구문에서, 주입받은 name 에 해당하는 파일이 없는 경우 exceptiondl 발생함.
• 주입받은 파일명에 대한 파일이 존재하지 않는 경우, try-catch로 잡아서 deault 처리를 하기 위함