이해안되는 부분

이런식으로 버튼을 클릭하면 결과물을 바로 렌더링해서 나오게 하는 연습을 하던 중 push쪽에서 개념이 막혔는데,

  const handlePush = function () {
    const newArr = [...array, query];
    //이건 왜 필요함?
    setArray(newArr);
    // console.log(newArr);
    setResult(newArr.join(", "));
  };
    return (
    <div>
      <input
        value={query}
        onChange={function (e) {
          setQuery(e.target.value);
        }}
      />
      <div>
        <button onClick={handlePush}>push</button>
        <button onClick={handlePop}>pop</button>
      </div>
      <div>
        <h3>원본배열</h3>
        <p>{array.join(", ")}</p>
      </div>
      <div>
        <h3>결과물</h3>
        <p>{result}</p>
      </div>
    </div>
  );
}
  

왜 handlePush 함수에서 setArray가 필요하냐는 것이다. 딱히 setResult의 값에 setArray가 직접적으로 영향을 주는게 없어보이는데 말이다.
튜터님, 동기, 친구를 통해 개념을 이해했는데

개념정리

일단 setArray는 useState를 통해 기존 default값을 가지고 있는 array의 값을 변경해주는 역할을 하는데,
setArray에 newArr 즉 [...array, query]를 넣어줌으로써 input에 사람이 입력한 value 값이 추가된 새로운 값으로 array를 변경해준 것이다.
이 작업이 진행되지 않는다면, setResult로 아무리 여러번 input창 안에 값을 넣어도 array의 배열은 고정되어 있기 때문에 딱 한번만 push되는 것이다.

헤깔렸던 부분 정리

setArray(newArr)이 왜 필요했나

기존 arr의 배열 내용을 수정하고 query값을 다시 넣어주기 위해

const newArr로 선언하면 재선언이 불가능한데 왜 배열이 계속 바뀔 수 있나?

const는 {}의 스코프안에서 함수를 실행하면 1회성으로 사용되기에 문제 없다

setResult와 setArray와 직접적인 연관된 코드가 없는데 왜 setArray가 필요한가?

setArray가 기존 array의 값을 변경해주고 함수는 선언될때마다 그 변경된 array를 ...을 이용하여 문자열로 바꿔주고, 뒤에 query값을 추가해줄 수 있기 때문에, 완전 초기 default값인 array의 배열 값의 변경을 위해서 setArray가 필요하며 그게 setResult에 영향을 끼친다.