제로초님

Question

제로초님 안녕 하세요  불변성 관련 해서 궁금한게 있어서 질문 남깁니다. const [ dataInfo, setDataInfo ] = useState(         {             labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],             datasets: [                 {                 label: 'My First dataset',                 fill: false,                 lineTension: 0.1,                 backgroundColor: 'rgba(75,192,192,0.4)',                 borderColor: 'rgba(75,192,192,1)',                 borderCapStyle: 'butt',                 borderDash: [],                 borderDashOffset: 0.0,                 borderJoinStyle: 'miter',                 pointBorderColor: 'rgba(75,192,192,1)',                 pointBackgroundColor: '#fff',                 pointBorderWidth: 1,                 pointHoverRadius: 5,                 pointHoverBackgroundColor: 'rgba(75,192,192,1)',                 pointHoverBorderColor: 'rgba(220,220,220,1)',                 pointHoverBorderWidth: 2,                 pointRadius: 1,                 pointHitRadius: 10,                 data: [65, 59, 80, 81, 56, 55, 40]                 }             ]         }     )     const Test = useCallback((e) => {         e.preventDefault()                  setDataInfo((prevState) => ({             ...prevState,             datasets: [(prev) => {                 fill:true             }]             })                      )     }, []) Test라는 버튼을 클릭 했을 때  dataInfo state안에 있는 datasets 객체에서 다른 것들은 유지 하고  예를 들어 fill이나 lable 같은 것만 변경 하고 싶을 때는 어떤식으로 처리를 해줘야 하는지 궁금 하여 질문 납김니다.

제로초(조현영) · Answer

이런 것에도 immer를 적용하시는 것을 추천드립니다. 배열 안 객체를 불변성있게 바꾸는 게 정말 복잡합니다. setDataInfo((prev) => produce(prev, (draft) => {   return 변경된상태(불변성 필요x) });