useState 초기화및 값 변경 관련 예시

아래와 같이 코드가 있다고 하자.

그렇다면 useState에 저장된 array는 값이 바뀔 때마다 재랜더링 되니까

array 초기값인 [0,0,0,0....]으로 돌아갈까? 

 

const array = new Array(글제목1.length).fill(0)

  let [good, setGood] = useState(array)

 

return (

    <div className='App'>

{

        글제목1.map((x,i) =>

        (

          <div className="list" key={i}>

        <h4>{ 글제목1[i] }<span onClick={()=>{

          let copy = [...good]

          copy[i] += 1

          setGood(copy)}}>👍</span>{good[i]}</h4>

       

        <p>2월 17일 발행</p>

      </div>

        ))

      }

   

    </div>

 

답은 아니다.

이게 차이나는 부분만 재랜더링 해준다는 가상돔 때문에 계속 새 값이 state에 계속 랜더링 되기 때문이다.

초기값만 0으로 채워진 배열을 참고할뿐, state값의 갱신만 react의 가상돔이 받아들여서 반영한다.

---

 작동순서

1. 상태 변경: 컴포넌트의 상태(state)가 useState의 업데이트 함수(예: setGood)를 통해 변경되면, React는 해당 컴포넌트를 다시 렌더링해야 한다고 판단합니다.
2. 가상 DOM 비교: React는 새로운 상태를 반영하여 가상 DOM을 업데이트하고, 이전 가상 DOM과 새로운 가상 DOM을 비교합니다.
3. 차이점 감지: 이 비교 과정에서 실제 DOM에 반영해야 할 변경 사항들을 파악합니다. 예를 들어, 특정 요소의 내용만 변경되었다면, 그 부분만 실제 DOM에 업데이트합니다.
4. 효율적인 업데이트: 이 방식은 전체 페이지를 다시 렌더링하는 것보다 훨씬 효율적입니다. 오직 변경된 부분만 실제 DOM에 반영되므로 성능이 향상됩니다.