귀여운 리액트

오늘은 리액트의 구동방식에 대해서 알아보자.

리액트는 사용자인터페이스를 구현하기위한 자바스크립트 라이브러리이다. 이런 리액트는 사용자인터페이스를 더 쉽게 구현하기 위해서 컴포넌트 개념을 채택하고 있다.

그러면 이런 컴포넌트들은 어떻게 RealDom과 서로 상호작용할 수 있는걸까?

ReactDom

사실 웹은 컴포넌트가 뭔지 모른다. 이를 알려주는 역할을 하는것이 ReactDom이다. ReactDom은 웹과 컴포넌트의 interface이다. 만일 그 전 상태와 비교했을때 차이점이 나타난다면 이걸 ReactDom이 인지하고 바뀐 사실을 RealDom에게 전달한다. 그렇게 해서 실제 Dom을 update한다.

컴포넌트는 props, context, state 셋 중에 하나라도 바뀌면 다시 재평가를 한다.

<aside> 💡 재평가와 리렌더링이랑 같은 말인가요? 그렇지 않다. 재평가가 된다고해서 무조건 리렌더링이 되는 것은 아니다. props,context,state 중에 하나가 바뀐다고 하면 함수가 재실행되어 차례대로 재평가가 된다. React에서는 ReactDom의 virtual Dom을 이용해서 그 전의 상태와 현 상태를 비교하여 바뀐점만 RealDom에 반영하여 리렌더링을 한다.

그렇기 때문에 재평가를 했을때 상태가 바뀌지 않으면 다시 렌더링이 일어나지 않는 경우도 있어서 무조건 재평가가 된다고해서 리렌더링이 필연적으로 따라오는 것은 아니다.

</aside>

virtual Dom

설명을 하다보니 virtual Dom이 나왔다. virtual Dom은 왜쓰는걸까?

만일 없던 내용이 생겨나서 이를 업데이트 해야한다고 가정해보자. 이걸 직접적으로 RealDom에게 바로 알려주는것은 자원이 많이 들게 된다. 그래서 우리는 ReactDom 의 virtualDom기능을 이용하여 전후 비교를 하는 것이다.