배열을 useState에서 사용할 때

const Main = () => {
  const [test, setTest] = useState([1, 2, 3]);

    function TestFunction({state, setState}): JSX.Element {
        return (
          <div
            style={{
              border: '1px solid black', height: '100px', width: '100%', display: ' block',
            }}
            onClick={() => {
              const qwer = state;
              qwer[2] -= 1;
              setState(qwer);
    
              console.log('clicked', state);
            }}
          >{test}
          </div>
        );
      }
    
    return (
        <TestFunction state={test} setState={setTest} />
    );
}

div 영역을 클릭하면 test 배열의 2번값이 -1 되어, 

클릭할 때마다 -1이 감소된 값이 리렌더될 것으로 생각되지만 .. 작동하지 않는다.

spread operator 를 사용하여

const asdf = [...state]; 이렇게 바꿔주어야한다는데 ..

 

원리는 시간나면 알아보도록 하자

 

https://stackoverflow.com/questions/68887710/using-array-as-react-hook-usestate