React+d3+axios를 같이 쓰려 하는데요.

Question

state에 d3 데이터로 쓰일 배열을 저장하고 있었더니 배열에 값 저장할때마다 리렌더링이 되어버려서 그냥 var배열 만들어서 거기에 d3 데이터 저장했거든요axios를 안쓰면 state에 데이터 배열을 넣어도 괜찮은데 axios로 데이터를 불러오는게 약간 시간이 걸려서 그런지 이런 이슈가 발생하더군요. 이하는 정상적으로 작동하는 코드고, 주석처리 되어있는 부분이 에러가 나는 코드입니다. 비정상적으로 작동하는 코드가 에러를 발생시키는 이유를 알고 싶고, 이렇게 var 배열을 만들었을 때 생길 수 있는 문제가 혹시 있는지가 궁금합니다.const Wrap = styled.svg` background-color:lemonchiffon; width:1800px; height:500px;`; const FactorList = ({}) => { var ids=[]; var names=[]; var powers=[]; var i=0; const [flag, setFlag] = useState(false); //const [list, setList] = useState([]); //const [data, setData] = useState([]); //const [data2, setData2] = useState([]); const svgRef=useRef(); useEffect(() => { const query = { query: { match_all: {} } } axios .get("http://localhost:4000/index", { params: { //query 결과 수 size: 100, source_content_type: 'application/json', source: JSON.stringify(query) } }) .then(({ data }) => { // data라는 이름으로 json 파일에 있는 값에 state값을 바꿔준다. //setLoading(true); //setList(data.hits); data.hits.map( ({ id, name, power}) => { ids[i]=id; names[i]=name; powers[i]=power; i++; } ); loadData(); console.log('ok'); }) .catch(e => { console.error(e.response); // 에러표시 //setLoading(false); }); }, []) console.log('rerendering test'); function loadData() { const width=ids.length*50; const height=500; const margin = ({ top:20, right:0, bottom:95, left:40 }); const x = scaleBand() .domain(names) //원래는 names가 아닌 data배열에 값을 집어넣어서 사용 .range([-8, width-margin.right]) .padding(0.1); const y = scaleLinear() .domain([0, max(powers)]).nice() .range([height - margin.bottom, 100]); const xAxis = g => g .attr("transform", `translate(0, ${height-margin.bottom})`) .call(axisBottom(x).tickSizeOuter(0)); const yAxis = g => g .attr("transform", `translate(-10,0)`) .call(axisLeft(y)) .call(g => g.select(".domain").remove()); const svg = select(svgRef.current); svg.attr("viewBox", [0,0,1300,height]); svg.append("g") .selectAll("rect") .data(powers) .join("rect") .style("mix-blend-mode", "multiply") .attr("fill", function(d){ if(d===10){ return "red"; } else if(d===9) { return "hotpink"; } else if(d===8) { return "orange"; } else { return "steelblue"; } }) .attr("x", function(d,i) {return i*50}) .attr("y", function(d) {return 400-(d*30)}) .attr("width", "40px") .attr("height", function(d) {return d*30}); svg.append("g") .call(xAxis); svg.append("g") .call(yAxis); } return(

);}; export default FactorList;

현승 · Answer

정확히는 비정상적으로 작동하는 코드의 경우 에러가 난다기보다는 값을 제대로 못읽어와서 그래프가 제대로 나오지 않습니다. 딱히 에러가 뜨는건 아니에요.

React+d3+axios를 같이 쓰려 하는데요.

1개의 답변

#d3 목록