React_불변변수_JSON/Array

import { useState } from "react";

export default function App(){

  const [num, setNum] = useState({n:0});

  /*

      1. 불변 변수가 아니기 때문에 화면 갱신이 안 됨

      객체(배열)은 반드시 불변객체로 관리해야 함

      배열 요소 값을 수정하는 방식이 아니라 배열 자체를 덮어쓰는 방식

  */

  function onIncrease() {

    /* 작동되지 않는 방식 */

    // num.n = num.n + 1;

    // setNum(num);

    // console.log("onIncrease: " + num.n);

    setNum({...num, n: num.n + 1});                /*

                                                      ...num:  num객체 복사                      

                                                      기존 객체 const num = {n: 0}              

                                                      num.n = 0                        

                                                      갱신 객체 const new_num = {n : num.n + 1}  

                                                   */

    console.log("onIncrease: " + num.n);

  }

  const onDecrease = () => {

    /* 작동되지 않는 방식 */

    // const new_num = {...num};

    // console.log(num === new_num);             /* false, num과 new_num 객체는 서로 다름 */      

   

    const new_num2 = {...num, n: num.n -1};

    setNum(new_num2);                            /* 덮어쓰기 */

  }

  return(

    <>

      <h1>{num.n}</h1>                           {/* num = {n: 숫자}  --->>> num.n으로 뽑아야 함 */}

      <button onClick={onIncrease}>+</button>

      <button onClick={onDecrease}>-</button>

    </>

  )

}

 

 

 

 

 

 

 

 

 

 

 

import { useState } from "react";

export default function App(){

  const [num, setNum] = useState([]);

  /*

      1. 불변 변수가 아니기 때문에 화면 갱신이 안 됨

  */

 

  function onIncrease() {                           /* 랜더링 반영되지 않음 */

    num.push(10);                                   /* console 상에는 반영되지만 랜더링 반영은 되지 않음 */

    setNum(num);

    console.log("+" + num)

  }

  /*

    2. 객체를 불변변수로 만드는 방법은 디스트럭처링 이용

    무조건 객체 수정은 디스트럭처링을 이용

  */

  const onIncrease2 = () => {                        /* 랜더링 반영됨 */

    setNum([...num, 10]);                            /* num을 넣고, 10을 추가 */

    console.log("+2" + num)

  }

  const onDecrease = () => {

    num.pop();                                       /* 인식되지 않음(랜더링에 반영 X) */

    const new_arr = [...num];                        /* 새로운 배열을 만듦 */

    setNum([new_arr]);                               /* 새로운 배열을 setNum */

    console.log("-" + num)

  }

  return(

    <>

      <button onClick={onIncrease}>+</button>

      <button onClick={onIncrease2}>+2</button>

      <button onClick={onDecrease}>-</button>

      <h1>{num}</h1>

    </>

  )

}