[ React ] 강제 렌더링

 

if (params.data.stgyField === 'attribute') {
            const temp = selectorDetailList2;

            for (let i = 0; i < temp.length; i += 1) {
                if (temp[i].stgyField === 'value' || temp[i].stgyField === 'minValue' || temp[i].stgyField === 'maxValue') {
                    temp[i].stgyValue = '';
                }
            }
            setSelectorDetailList2([]);
            setSelectorDetailList2(temp);
        }

setSelectorDetailList2([]); 이 부분을 입력하지 않으면 그리드가 바로 바뀌지 않더라고. 왜 그럴까?

 

 

`setSelectorDetailList2([])`를 호출하는 이유는 React의 상태(state)를 업데이트하여 컴포넌트를 다시 렌더링하고, 변경된 데이터를 UI에 반영하기 위함입니다. React는 상태가 변경되면 해당 컴포넌트를 다시 그리고 업데이트된 내용을 화면에 표시합니다.

`setSelectorDetailList2([])`를 호출하지 않고 `setSelectorDetailList2(temp)`만 호출하는 경우, React는 `temp` 객체의 변경을 감지하지 못하고 컴포넌트를 다시 렌더링하지 않습니다. 이는 React의 상태 업데이트 메커니즘으로 인해 발생합니다.

React에서 상태를 업데이트할 때, 상태는 불변성(immutability)을 유지해야 합니다. `temp` 객체를 수정하더라도 객체 자체의 참조는 변경되지 않기 때문에 React는 이를 변경으로 인식하지 못하고 렌더링을 스킵합니다. 따라서, `setSelectorDetailList2([])`를 호출하여 새로운 상태를 전달함으로써 React에게 변경을 알리고 컴포넌트를 다시 렌더링할 수 있게 합니다.

따라서, `setSelectorDetailList2([])`를 호출하지 않는다면 그리드가 바로 변경되지 않는 이유는 React의 상태 업데이트 메커니즘과 불변성을 유지해야 하는 규칙 때문입니다.

 

 

* 참고할 것

https://db2dev.tistory.com/entry/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EA%B0%95%EC%A0%9C-Re-render%ED%95%98%EA%B8%B0-re-render-%EC%9B%90%EB%A6%AC%EC%97%90-%EB%8C%80%ED%95%9C-%EC%9D%B4%ED%95%B4

[React] 컴포넌트 강제 Re-render하기 (re-render 원리에 대한 이해)