아래와 같이 코드가 있다고 하자.
그렇다면 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의 가상돔이 받아들여서 반영한다.
작동순서
- 상태 변경: 컴포넌트의 상태(state)가 useState의 업데이트 함수(예: setGood)를 통해 변경되면, React는 해당 컴포넌트를 다시 렌더링해야 한다고 판단합니다.
- 가상 DOM 비교: React는 새로운 상태를 반영하여 가상 DOM을 업데이트하고, 이전 가상 DOM과 새로운 가상 DOM을 비교합니다.
- 차이점 감지: 이 비교 과정에서 실제 DOM에 반영해야 할 변경 사항들을 파악합니다. 예를 들어, 특정 요소의 내용만 변경되었다면, 그 부분만 실제 DOM에 업데이트합니다.
- 효율적인 업데이트: 이 방식은 전체 페이지를 다시 렌더링하는 것보다 훨씬 효율적입니다. 오직 변경된 부분만 실제 DOM에 반영되므로 성능이 향상됩니다.
'🪁react > react 이론정리' 카테고리의 다른 글
return할 값이 없어도 return을 쓰는 이유 (0) | 2024.01.11 |
---|---|
e.target.value와 e.target.name 이해하기[대괄호 표기법 이란?] (0) | 2024.01.10 |
react splice 제대로 파보기[각 메소드 반환값을 제대로 알아야 코드에러x] (0) | 2024.01.09 |
() => 함수명() 문법 사용이유 || 기존 함수모양과는 다른 state 함수 (0) | 2024.01.09 |
useState와 불변성()[객체의 일부속성만을 업데이트 : ...()를 자주 사용] (0) | 2024.01.08 |