버블 만들기 (라이브러리 X)

버블 만들기 (라이브러리 X)

실전 프로젝트에서 버블 차트를 만들어야 해서 찾아보다가 2시간이 넘어서도 자바스크립트로 된 코드를 응용해서 리액트에 접목 시키지 못해서 하드 코딩으로 한번 만들어 보는 건 어떨까 라는 생각이 들었고, 여러 블로그를 참고해서 만들어 봤다. 예쁜 버블 차트라고는 못하지만... 나름 열심히 만들어 보았다.

import React from "react"; const Bubble = () => { const style = {area : [], gap : [], rgb : []}; const makeColor = () => { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return `rgb(${r}, ${g}, ${b})`; // rgb color code } for (let i = 0; i < 10; i++) { style.area.push(Math.ceil(Math.random() * (100-50) + 40)); style.gap.push(Math.ceil(Math.random() * (10-5) + 5)); style.rgb.push(makeColor()); } return ( {style.area.map((item, index) => { return ( ); })} ); }; export default Bubble;

참고한 사이트

-> Math.random() 함수를 사용하여 원하는 범위의 랜덤 숫자를 출력했다.

https://velog.io/@on-n-on-turtle/java-Math.random-%EC%9B%90%ED%95%98%EB%8A%94-%EB%B2%94%EC%9C%84%EA%B9%8C%EC%A7%80-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B2%95

->div마다 다른 색상을 넣어주고 싶어서 참고했다.

https://webisfree.com/2020-03-17/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EB%9E%9C%EB%8D%A4-%EC%83%89%EC%83%81-%EC%B9%BC%EB%9D%BC-%EA%B5%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95

from http://eundol1113.tistory.com/315 by ccl(A) rewrite - 2021-12-24 18:27:01