React : Shallow copy & deepCopy – Immer

by Posted on

ㆍImmer 사용하기

import produce from ‘immer’
const 새배열 =  produce( 원본배열 , 복사된배열  => {  복사된배열을 수정처리, 완료되면 새배열  로 리턴함})
setValue(새배열);  // 리턴된 새배열로원본에 Update

const   [ myArray  , setMyArray] = useState( [ 1,2,3 , { color : ‘blue’ , checked : false} ]);
 
const clickfunc = {

     const newArray = produce(myArray , draft => {
              draft[0] = 100;
              draft[3].color = ‘led’
   });

  // newArray 에는 draft 에서 수정된 수정본을 가지고 있다.

  // 이때 myArray 는 원본을 그대로 유지하고있다.

  setMyArray(newArray); // 새로 변경된 newArray 배열로 update
}


import React from ‘react’
import {useState} from ‘react’
import produce from ‘immer’;

function App() {

    const  [ Info , setInfo] = useState([
            “friend List”,
            { name:’Michael’ , tel : [‘010-0000-0000’ , ‘010-000-0001’]} ,
            { name:’Jhon’    , tel : [‘010-1111-0000’ , ‘010-111-1001’]} ,
            { name:’Steve’   , tel : [‘010-2222-0000’ , ‘010-222-2001’]} ,
            [1,2,3],
            200,
  ])

  // Info  :  원본 객체(배열) 을 그대로 넣어준다
  // draft :  원본 객체(Info) 복사본이 생성된다
  //          Info 원본을 유지한채 draft 복사본을 수정하면 newInfo 에 새로운 배열(객체)로 리턴함

  function clickImmer(){

            const newInfo = produce( Info , draft  =>  {
                    draft[1].name = “Jason” // Info 의 복사본 draft 를 수정한다.                   
    })

    // useState 는 비동기로 작동되기때문에
    // setInfo 바로 다음에 console.log() 를 출력해봐도 변경된 값을 바로 볼 수 없다   
    console.log(Info);
    setInfo(newInfo)
    console.log(Info);  
  }

  return(
    <div>
      <div>{Info[1].name}</div>
      <div><button onClick={clickImmer}>Immer 불변성 저장</button></div>
    </div>  
  )
}
export default App;
 

Published by pluginn

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다