[React] State

Vanilla JavaScript와 ReactJS는 노드 변경 처리 과정이 좀 많이 다릅니다.

 

1. Vanilla JavaScript
Vanilla JavaScript에서는 DOM 변경을 직접 처리합니다. 즉, 필요한 DOM 요소를 직접 선택하고, 요소의 속성을 변경하거나 새로운 요소를 추가하거나 기존 요소를 제거하는 등의 작업을 직접 수행합니다.
DOM 변경이 발생하면, 브라우저는 변경된 DOM 트리를 다시 계산하고, 렌더 트리를 다시 생성한 후 화면에 그립니다. 이 과정은 비용이 많이 드는 연산으로, 자주 발생하게 되면 성능을 저하시킬 수 있습니다.

 

2. ReactJS
ReactJS는 DOM 변경을 처리하기 위해 가상 DOM(Virtual DOM)이라는 개념을 도입합니다. ReactJS에서는 먼저 메모리에 가상 DOM 트리를 생성합니다. 이 트리는 실제 DOM 트리의 사본으로서, 실제 DOM 트리와 별도로 존재합니다.
ReactJS는 상태 변경이 발생할 때마다 새로운 가상 DOM 트리를 생성하고, 이전의 가상 DOM 트리와 비교하여 변경된 부분을 파악합니다. 이렇게 파악된 변경 사항만 실제 DOM에 반영하는 방식을 사용합니다. 이 과정을 '재조정(Reconciliation)' 또는 'Diffing'이라고 부릅니다.
가상 DOM을 사용함으로써, 변경이 필요한 최소한의 요소만 실제 DOM에 반영되기 때문에 불필요한 연산을 줄이고 성능을 향상시킬 수 있습니다.

 

따라서, ReactJS는 복잡한 UI 업데이트를 효과적으로 처리할 수 있으며, 이를 통해 웹의 응답성을 향상시키고 사용자 경험을 개선할 수 있습니다!

---

 

const [value, setValue] = React.useState()

 

useState는 modifier(setValue) 함수를 통해 value 값을 업데이트할 경우 자동으로 새로 렌더링해줌으로써

그냥 변수로 선언했을 때 값이 업데이트될때마다 render 함수를 호출해줘야하는 수고를 덜어준다.

 

useState의 modifier(setValue) 함수는 비동기적이라서, 리렌더링할 때 다 모아서 한번에 값을 갱신하기 때문에

함수의 첫번째 argument를 통해 현재 state 값을 기준으로 계산해야 한다.

그렇지 않으면 현재 state 값과는 상관없는 새로운 state 가 발생한다. (최초 실행시의 값이 마지막 결과값)  

const [counter, setCounter] = React.useState(0)

// 방법1. state에 직접 접근
function onClick() {
    setCounter(counter + 1)  // 1
    setCounter(counter + 1)  // 1
    setCounter(counter + 1)  // 1
}

// 방법2. 함수를 통해 현재 state값에 접근
function onClick() {
    setCounter(current => current + 1)  // 1
    setCounter(current => current + 1)  // 2
    setCounter(current => current + 1)  // 3
}

 

 

https://119taeyoung.tistory.com/113

[JS] const인 array, object 요소 수정 가능한 이유