[React_study] array, object state 변경하는 법

* state 변경함수 동작원리 

state변경함수를 쓸 때 기존state === 신규state 상태인지 먼저 검사해준다.

만약 같으면 state를 변경 해주지 않는다.

 

JavaScript는 array/object 자료를 하나 만들면 자료는 Ram이라는 가상공간에 저장이 되고 변수는 그 자료가 어디 있는지 가리키는 화살표만 담고있다. (JavaScript reference data type)

 

 

 

따라서 완전 독립적인 array, object 복사본을 생성하려면

shallow copy, deep copy를 해주어야 한다.

 

방법으로는 spread operator 라고하는 문법이 있다. array혹은 object자료형 왼쪽에 붙일 수 있으며 괄호를 제거 해주세요. 라는 뜻을 가지고 있다. (array나 object 자료형을 복사할 때 많이 사용)

 

괄호가 제거 되면서 Copy by Value(값에 의한 복사)가 되고 다시 배열을 씌워주면 독립적인 array, object 복사본을 생성할 수 있게 된다.

const a = [1, 2, 3];

console.log([...a])

 

* array, object state 변경 예시 코드

- 내용 변경 예시 코드

function App(){
  
  const [title, setTitle] = useState( ['Welcome', 'Hello', 'Cool'] );  
  
  return (
    <button onClick={ ()=>{ 
      const copyTitle = [...title];
      copyTitle[0] = 'Come on';
      setTitle(copyTitle)
    } }> Edit button </button>
  )
}

- 내용 추가 예시 코드

function App(){
  
  const [title, setTitle] = useState( ['Welcome', 'Hello', 'Cool'] );  
  
  return (
    <button onClick={ ()=>{ 
      setTitle([...Title, 'come on'])
    } }> Edit button </button>
  )
}

array, object자료를 다룰 때는 원본 데이터를 직접 조작하는것 보다는 기존값을 보존해주는 식으로 코드를 짜는게 좋은 관습이다.

(원본을 변경하게 되었을때 원본이 필요한 상황이 오면 막막할 수 있다.)

그래서  copy같은 변수에다가 기존 array, object를 복사해놓고 그걸 조작하는 식으로 코드를 짜면 조금 더 안전하다.

 

* 응용 예시 (가나다순으로 정렬)

function App(){
  
  const [title, setTitle] = useState( ['Welcome', 'Hello', 'Cool'] );
  
  return (
    <button onClick={ ()=>{ 
      const copyTitle = [...title];
      copyTitle.sort();
      setTitle(copyTitle);
    } }> sort button </button>
  )
}

 

[결론적으로]

리액트에서 array/object state를 수정하고 싶으면  독립적인 카피본을 만들어서 수정하는게 좋습니다. 

[...기존state]

{...기존state} 

이렇게 하면 독립적인 copy가 하나 생성됩니다