리액트 리렌더링 작동방식에 관한 질문입니다.

해당 부분은 리액트의 가상돔 렌더링 과 실제 dom렌더링이 다르다는점에서 발생한 오해인 것 같습니다. 리액트의 동작 원리를 간단하게 나타내면 상태변경 => 가상DOM렌더링 => 가상DOM과 실제 DOM비교 => 실제DOM렌더링 이러한 방식으로 동작되게 됩니다. 여기서 상태가 변경되면 리액트는 부모 컴포넌트가 변경될 시 자식 컴포넌트는 따로 memoization을 해주지 않는이상 변경되었다고 가정하고 가상DOM을 그리게됩니다. 이 때가 rendering이 발생하게 됩니다. 말을 렌더링이라고 하지만 실제로는 가상돔을 그린것이고 실제 화면과는 무관하게 메모리상에서만 변경이 된거죠. 그리고 이렇게 렌더링된 가상DOM과 실제 DOM을 비교하여 변경된 부분을 업데이트하는 작업이 발생하게 됩니다. 이 때에는 자식 컴포넌트가 리렌더링은 되었지만 실제 DOM과 차이는 없을것이기 때문에 변경되지는 않습니다. 실제로 간단한 예제를 만들어서 DOM이 변경되는지 확인해보시면 console 에는 render! 라고 찍히게 되지만 실제 dom은 아무련 변화가 없는것을 확인하실 수 있습니다. 다시한번 정리하면 리엑트에서 말하는 렌더링이란 가상돔 렌더링을 말하는 것이고 질문자님께서 말씀해주신 "리액트는 바뀐 부분이 있다면 변경된 부분의 컨텐츠만 javascript 코드를 통해 변경하는 방식으로 작동한다고 이해하였습니다." 이부분은 가상돔 렌더링 후에 실제 DOM을 렌더링하는 과정을 말하는 차이가 있습니다.

무조건 부모 컴포넌트의 상태가 변경된다고 자식 컴포넌트들이 리렌더링 되는 것이 아니라 말씀하신 것처럼 변경된 부분만 리렌더링 됩니다. 만약 부모와 자식이 같은 상태를 공유하고 있다고 했을 때 부모 컴포넌트에서 상태 변경이 일어나면 공유하고 있는 자식에서도 값이 변경되기 때문에 리렌더링이 발생합니다! 또한 부모와 자식이 공유하고 있지 않다고 해도 부모의 상태 변경이 자식에 영향을 끼친다면 리렌더링이 발생하지 않을까요? 이처럼 부모와 자식 관계에서는 부모의 상태가 변경됐다고 하더라도 이와 관련된 자식만 리렌더링이 발생할 뿐 관련되지 않은 자식 컴포넌트는 리렌더링이 발생하지 않는 것으로 알고 있습니다! 잘못된 정보가 있으면 댓글 부탁드려요!