[카테고리:] 미분류

“하루에 배우는 리엑트 기본” 중 아래 15개의 영상이 리엑트의 기본 내용을 정리한 것입니다. 전체 시간은 100분 정도니 단디 맘 먹고 집중해 학습하면 하루에 다 이해할 수 있는 내용이므로 학습 후 바로 React 실무에 풍덩 빠져 치열하게 싸워 보시기 바랍니다.

웹 UI 라이브러리인 GWC에서 제공하는 ValueRangesColorMatcher 컴포넌트에 대한 예제 코드입니다.

먼저 DOM 구성은 다음과 같습니다.

그리고 CSS 구성은 다음과 같구요.

.center {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 1em;
}

#matcher {
    width: 30em;
    height: 15em;
}

js 코드는 다음과 같습니다.

window.onload = () => {
    const data = [ 165, 120, 160, 200, 135, 115, 100, 125, 135, 190, 156, 130 ]
    const rangeColors = [
        { ranges: [100, 120], color: '#00ff00'},
        { ranges: [120, 141], color: '#88ff00'},
        { ranges: [141, 160], color: '#ffff00'},
        { ranges: [160, 180], color: '#ff8800'},
        { ranges: [180, 200], color: '#ff0000'}
    ]

    matcher.defineData(data, rangeColors)

    document.querySelector(".btn-get").addEventListener("click", () => {
        alert(JSON.stringify(matcher.valueRangeColors, null, 4))
    })

    GeoServiceWebComponentManager.instance.update();
};

실행 결과는 다음과 같습니다.

소수점을 설정할 수 있으며 속성은 toFixed 입니다.