코드는 불편하실까봐 통째로 올리겠습니다.
import React from "react";
import {useState} from 'react'
const Chart_Pie1 = React.lazy(() => import("../components/Chart_Pie1"));
const Dev = () => {
var chartData = [
{
id: "java",
label: "java",
value: 1985,
color: "hsl(90, 70%, 50%)"
},
{
id: "erlang",
label: "erlang",
value: 419,
color: "hsl(56, 70%, 50%)"
}
];
const [hasRender, setRender] = useState(false);
const onShow = React.useCallback(() => setRender(true), []);
function changeValue() {
chartData = [
{
id: "java",
label: "java",
value: 1985,
color: "hsl(90, 70%, 50%)"
},
{
id: "erlang",
label: "erlang",
value: 414839,
color: "hsl(56, 70%, 50%)"
},
];
console.log(changeValue)
return changeValue;
}
function isChanged(){
console.log(chartData)
}
return (
<>
<button onClick={onShow}>showChart</button>
<button onClick={changeValue}>changeValue</button>
<button onClick={isChanged}>isChanged?</button>
{hasRender && <Chart_Pie1 chartData={chartData}/>}
</>
)
}
export default Dev;
사진과 같이 객체의 값을 변경했음에도 불구하고 처음의 값으로 렌더가 됩니다.
