[React] State값을 직접변경하면 안되는 이유

React에서 state값을 변경할 때 항상 강조하는 부분은 State를 직접 변경하면 안 된다는 점이다. 

 

React를 처음 배울 때는 시간이 없어서 '그냥 그런갑다~'하고 넘겼지만, 

 

오늘은 조금 깊게 왜 그런지 원리를 알아보고자 한다. 

 

위의 이유를 알기 위해서 우선은 'Shallow Equality Check'에 대한 개념부터 이해해야 한다. 

 

Shallow Equality Check

Shallow Equality Check 개념은 이전 포스팅에서 다루었던, 

 

Shallow copy vs Deep copy와 비슷하다. 

 

Shallow compare works by checking if two values are equal in case of primitive types like string, numbers and in case of object it just checks the reference. So if you shallow compare a deep nested object it will just check the reference not the values inside that object.

 

얕은 비교는 두개의 변수가 문자, 숫자 등과 같은 원시 타입일 경우 값을 비교하고, 객체일 경우 레퍼런스 값을 비교한다. 

따라서 다층구조를 가진 객체를 얕게 비교하면 구조 안의 각각의 값을 비교하지 않고 레퍼런스 값 만을 비교하게 된다. 

 

 

State와 Shallow Equality Check

 

그렇다면 얕은 비교가 State와 어떤 관련이 있는 것인가?

 

기본적으로 React는 state에 어떠한 변경이 발생했을 때 변경된 부분을 Re-rendering 하도록 설정되어 있다. 

 

문제는 얕은 비교의 여러가지 장점(속도 등) 때문에 변경이 발생했는지 체크를 할 때 얕은 비교법을 사용하고 있다. 

 

따라서 state를 직접 변경 했을 경우, 

 

state의 객체 값은 변경이 되었더라도 참조값의 변경은 없기 때문에, 

 

Re-rendering이 발생하지 않게 된다. 

 

따라서 setState 메소드를 통해 값을 변경해 주어야 하는 것이다.