react concurrent mode에 대하여...

<회고록>

오늘은  react concurrent mode 에 대해서 알아볼려고 한다.

 

1.  react concurrent mode의 등장 배경

 :  react concurrent mode는 사실상 리엑트 아니 자바스크립트의 고유적인 성질로 인해서 나오게 되었다. 자바스크립트의 경우에는 싱글 스래드 기반으로 로직이 흘러간다. 이 말은 하나의 작업을 하고 있을 때 다른 작업을 중단 시킨다는 의미이다. 그리고 리엑트 역시 싱글 스래드 기반으로 로직이 흘러간다. 만약 이런 코드가 있다면 어떻게 작동할까?

import { useState } from "react";

const TECOBLE = ["프", "론", "트", "엔", "드", "화", "이", "팅"];

function App() {
  const [input, setInput] = useState("");
  const [array, setArray] = useState([...Array(5000)]);

  const handleChange = (event) => {
    setInput(event.target.value);
    setArray(
      array.map((_, index) => TECOBLE[index % TECOBLE.length] + Math.random())
    );
  };

  return (
    <div>
      <input
        placeholder="아무 값이나 입력해보세요!"
        value={input}
        onChange={handleChange}
      />
      {array.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

export default App;

• 인풋의 값을 넣었을 때 상태가 업데이트 된다.
• 상태가 업데이트 되었기에 리렌더링이 이루어진다.
• virtual DOM과 기존의 DOM의 차이점이 발생했음으로 차이점을 개선한 DOM을 업데이트한다.
• 업데이트된 DOM을 페인팅한다.
• 위 과정에서 인풋의 값이 바뀌어도 해당 로직은 실행시키지 않는다 ( 이유 : 싱글스래드)

따라서 만약 내가 인풋을 굉장히 빠른 속도로 치게 된다면 해당 인풋의 값이 변해도 그 변한 값이 적용이 되지 않는 것을 알 수 있다.

이는 성능적인 측면에서 보았을 때 사용자에게 수정되는 부분들을 즉각적으로 보여줄 수 없기 때문에 안좋은 성능이라고 볼 수 있다.

그래서 이런 점을 해결하기 위해서  react concurrent mode가 나오게 되었다. 

 

2.  react concurrent mode란 무엇일까?

 :  react concurrent mode의 탄생 배경을 보게 된다면 사실상 자바스크립트에서의 싱글 스래드 문제를 해결하기 위해서 나왔다고 봐도 무방하다. 즉 동시성을 확보하기 위해서 나온 기술이  react concurrent mode이다. 즉  react concurrent mode는 동시성을 구현하는 기술이라고 볼 수 있다.

 

3.  react concurrent mode의 동작 원리

 :  react concurrent mode의 동작 원리를 한 문장을 표현하자면 다음과 같다. 특정 state가 변경되었을 때 현 ui를 유지하면서 동시에 변경된 ui를 준비하고 이 준비된 ui의 렌더링 단계가 특정 조건에 부합할 경우 변경된 ui를 랜더링한다