useState and Copy

useState?🍓

useState : useState함수를 호출하면 변수와 그 변수를 set해주는 함수를 return 한다 useState를 통해 만든 변수는 값이 변경이 되면 랜더링되며 새롭게 써진다.

이때 변수의 값을 변경하기 위해 사용되는 함수가 setter함수이다.

사용방법🍓

ex) 잘못된 사용법

let [like, setlike] = useState("🤍");

{
  <div
    onClick={() => {
      like = "하트";
    }}
  >
    {like}
  </div>;
}

이것은 잘못된 예시이다. 실제로 🤍를 클릭한다고 해도 like변수는 ‘하트’로 변하지않는다. 오직 setlike함수를 통해 변경될 수 있다.

ex) 올바른 사용법

let [like, setlike] = useState("🤍");

{
  <div
    onClick={() => {
      setlike("하트");
    }}
  >
    {like}
  </div>;
}

올바른 예시. 🤍를 누르면 ‘하트’ 라는 텍스트로 변경된다.

---

참조타입일때🍓

ex) 참조타입(배열)의 잘못된 사용법

let [like, setlike] = useState(["안녕", " 뭐해"]);

{
  <div
    onClick={() => {
      setlike((like[2] = "잘가"));
    }}
  >
    {like}
  </div>;
}

버튼을 누르면 배열의 2번 인덱스에 값을 넣어줘 라고 명령한것같은데 버튼을 누르면 ‘잘가’라고 바뀐다. 초기값들이 없어진것이다.

ex) 올바른 사용법

let [like, setlike] = useState(["안녕", " 뭐해"]);

{
  <div
    onClick={() => {
      let copy = [...like];
      copy.push(" 잘가");
      setlike(copy);
    }}
  >
    {like}
  </div>;
}

전개연산자를 통해 배열을 deepCopy해주었고 copy에 값을 넣어 그것을 set해주었다. // 안녕 뭐해 잘가

---

ex) 참조타입(배열의 요소에 참조타입이 있을경우)의 잘못된 사용법

let [like, setlike] = useState([{"안녕",1}, {" 뭐해",2}]);

{
  <div
    onClick={() => {
      let copy = [...like];
      copy,push({"goodbye"});
      setlike(copy);
    }}
  >
  </div>;
}

배열의 요소로 참조타입이 있을경우 전개연산자로 copy하는 방법은 올지않다. 배열의 바깥부분만 copy되어 얕은복사가 된다.

ex) 올바른 사용법

let [like, setlike] = useState([{"안녕",1}, {" 뭐해",2}]);

{
  <div
    onClick={() => {
      let deepcopy = JSON.parse(JSON.stringify(like));
      deepcopy.push(" 잘가");
      setlike(copy);
    }}
  >
  </div>;
}

배열을 string으로 바꾸고 그값을 다시 Object로 바꾸는 과정에서 모든 값들이 기존 레퍼런스와 끊겨 새로운 레퍼런스를 생성하기에 완벽한 deepcopy라 볼 수 있다.

---

📗 얕은 복사: 레퍼런스를 공유함 📗 깊은 복사: 아예 새로운 레퍼런스를 가짐

깊은 복사 1 : JSON.parse(JSON.stringify()) 사용 // 단점 - 함수가들어간 Object는 사용x

깊은 복사 2 : lodash(_) 라이브러리 사용

const original = { a: { b: 2 } };
let copy = _.cloneDeep(original);
copy.a.b = 100;
console.log(original.a.b); //2

깊은 복사 3 : 커스텀 재귀함수

function cloneObject(obj) {
  var clone = {};
  for (var key in obj) {
    if (typeof obj[key] == "object" && obj[key] != null) {
      clone[key] = cloneObject(obj[key]);
    } else {
      clone[key] = obj[key];
    }
  }

  return clone;
}

머리아프지않게 lodash라이브러리를 애용하자.