[React] state를 직접 수정하지 않고 setState를 사용하는 이유

setState말고 state를 직접 변경해주면 왜 화면 갱신이 안될까?

리액트 컴포넌트은 Mount 상태에서 한번 render()를 실행하고, 후에는 Update상태에 진입하여 shouldComponentUpdate가 true 일때만 render()를 실행한다.

따라서 변경한 state가 화면에 보이게 되려면 Update상태에 들어가야 하는데 그러려면

• state 또는 props가 변경
• 부모 컴포넌트가 렌더링
• forceUpdate 사용

을 해야한다.

 

state가 변경되면 update가 되어야 한다고 생각이 들지만 리액트가 이 값이 변경됐다고 판단하는 기준이 객체의 메모리 주소이기 때문에 객체의 주소가 변경되지 않고 내부의 값만 바뀌면 바뀐것으로 인식을 안하기 때문이다. 

따라서 setState() 함수를 이용하여 state를 변경 해야하지만, setState()함수는 비동기적으로 업데이트 되기 때문에 동기적으로 업데이트 될 수 있도록 setState()함수에 인자로 객체를 주는 것 대신 함수형으로 실행하거나 외부 라이브러리를 사용해서 상태를 업데이트 하는것이 좀 더 안정적으로 상태를 업데이트 할 수 있다.

 

 

이와 관련되서 useState가 const를 사용하는 이유도 같이 정리할 수 있다.

const [state, setState] = useState(0);

state 변수를 바꿔주는건데 왜 let이 아닐까?

• 컴포넌트가 다시 렌더링 되면 함수가 다시 실행되어 새 scope를 만들고, state변수도 새로 만들게 되고, 이는 이전 변수와 상관이 없게 된다. 따라서 const로 선언된 state변수는 동일한 scope에서 다시 할당하는 것을 막을 수 있다.