리액트의 작동 방식

Academind 에서 리액트 강의를 수강후 배운내용을 정리하는 포스트입니다. 

---

1. 리액트의 작동방식

리액트 라이브러리는 사실상 크게 2가지로 구성되어있다 볼수있는데 React 그리고 ReactDOM 이다.

React 그리고 ReactDOM은 각자 맡는 역할이 다르다. 

- React는 상태변화를 듣고 컴포넌트들을 관리하는 역할 (=상태변화에 따라 컴포넌트 함수(또는 클래스)들을 실행하여 렌더링 결과가 어떻게 되어야 하는지의 정보(컴포넌트 트리 라고도 할수 있을거다) 관리)

- ReactDOM은 React로 부터 기존의 컴포넌트 트리 모습과 현재 상태변화에 따른 컴포넌트트리의 차이점에 대한 정보를 받고 해당 정보를 기반으로 Real DOM을 수정한다. 

즉 상태(state)에따라 컴포넌트 함수를 execute 하는 부분과 실제로 DOM을 조작하는 부분이 분리되어있다. 

따라서 한가지 기억할 점은 컴포넌트가 Re-Evaluated(컴포넌트함수가 상태변화에따라 실행되더라도) 될때마다 렌더링(실제 DOM을 조작해 사용자의 화면이 바뀌는것) 이 되는것이 아니라는 것이다. 왜냐하면 ReactDOM은 React로 부터 차이점에대한 정보만을 받아서 최소한의 DOM 조작으로 화면을 렌더링 하기때문이다.  

2. 리액트의 작동방식

리액트에서 상태를 변경할때 (setState나 useState에서 나온 상태변화함수를 이용할때) 사실 상태변화는 바로 이루어지는것이아니라 scheduled 된다. 다만 이과정이 너무 빨라서 우리는 상태변화가 바로 이루어진다고 생각하는것.

또한 여러개의 상태변화가 동시에 이루어지면 리액트는 효율적인 처리를 위해 상태변화여러개를 묶어서 스케쥴링 해놓을수도있다.

이 경우 컴포넌트내에서 특정함수가 이전 상태의 실행결과를 바탕으로 어떤 작업을 수행한다면 해당함수가 받는 상태가 가장 최신의 상태가 아닐수도 있는 경우가 생긴다. 그걸 방지하기위해서 상태변화 함수에는 콜백함수를 prevState인자와 함께 넣어줘야 가장 최신의 이전 상태를 바탕으로 작업을 수행할 수 있다.