useState란 무엇이고 왜 리액트에선 useState를 통해 값을 변경해야할까?

이전 포스팅에서 리액트는 VirtualDom이라는 방식을 사용해 리렌더링한다는 것을 확인했습니다.

리액트에서 사용하는 VirtualDOM에 대해 알아보자

 

1. VirtualDOM에서 useState로 인해 변경된 값이 있다는 것을 확인합니다.

2. 변경된 값이 있는 컴포넌트와 그 하위컴포넌트 모두 파악합니다.

3. 그렇게 파악한 컴포넌트들을 모두 VirtualDOM에서 수정한다.

4. VirtualDOM의 계산이 끝나면 DOM에 적용한다.

 

그리고 VirtualDom으로 렌더링이 진행되는 순서를 확인했는데요.

 

리액트를 처음 사용하시는 분들은 useState에 대해 궁금할 수 있을 것입니다.

간단히 말하면 리액트에서 변수를 변경하기 위해 사용되는 함수입니다.

사용방법은 아래 글에서 확인하실 수 있습니다.

리액트, useState를 사용해서 브라우저 값 변경하기

 

그렇다면 왜 리액트는 useState를 통해 변수를 변경해야할까요?

그건 리액트는 직접적으로 Dom에 접근해 값을 바꿔주면 변경된 값이 반영되지 않기 때문입니다.

리액트는 useState를 통해 값이 변경되면 리렌더링의 신호를 줍니다. 반대로 직접 Dom을 변경하면 리렌더링의 신호를 주지 않습니다.

 

리액트가 값이 변경됐다는 것을 판단하는 기준이 객체의 메모리주소이기 때문이며, 주소가 변경되지 않고 내부의 값만 바뀌면 바뀐것으로 인식하지 않습니다.

 

 

 

이후 값이 변경됐다는 것을 확인하면 변경된 값이 선언된 컴포넌트부터 하위컴포넌트 모두 리렌더링을 진행합니다.