React (jsx) DOM 객체에 접근방법 정리
useRef 사용하여 ref 변수 선언
const chartRef = useRef();
DOM 객체에 ref attribute로 전달
<LineChart options={options} data={data} ref={chartRef} />
아래 코드로 객체 접근
chartRef.current.getInstance()
const Contents = () => {
...
const chartRef = useRef();
const [options, setOptions] = useState({
chart: {
width: 500,
height: 400,
title: ''
},
tooltip: {
formatter: (value) => `${value}건`
}
});
const [data, setData] = useState();
const inquiryChartData = async () => {
try {
let chatDataVal = await api.inquiryChartData();
setData(chatDataVal.data);
setOptions(chatDataVal.options);
chartRef.current.getInstance().resize({
height: chatDataVal.options.chart.height,
width: chatDataVal.options.chart.width
});
} catch (err) {
console.log(err);
}
};
useEffect(() => {
inquiryChartData();
}, []);
return (
<div className="row">
<div className="col-xs-12">
<div className="cont">
<LineChart options={options} data={data} ref={chartRef} />
</div>
</div>
</div>
);
}
export default AdminContents;
