[원티드] 5월 26일 TIL

개인적으로 꽤 어려운 내용이지만 알아두면 리액트를 이해하는데 도움을 줄 만한 글들이 많아 천천히 공부해보고자 한다. 내용이 어려운만큼 초회차에는 가볍게 이해만 하고 넘어가고자 한다.

https://goidle.github.io/react/in-depth-react-intro/

React Phase와 React Commit

Render phase는 쉽게 말해 VDOM 조작 단계!
Commit phase는 Render phase에서 재조정된 VDOM을 DOM에 적용하는 단계!
알아두어야 할 점은 DOM에 마운트된다는 것이지 페인트 된다는 것이 아니다.

이 단계는 모드와는 상관없이 항상 일관적인 화면 업데이트를 위해 동기적으로 실행 됩니다. 동기적으로 실행된다는 건 콜 스택을 한 번도 비우지 않고 DOM 조작을 일괄처리한다는 뜻입니다. 그러므로 Commit phase 중간에 페인트 되지 않습니다. 이 단계가 끝나고 리액트에서 콜 스택을 비워줘야지만 브라우저에서 화면을 페인트 할 수 있게 됩니다.

const App = () => {
  const [state,setState] = useState(0);
    const a = 3;
  
  return (
    <>
      <button onClick={()=>setState(prev => prev + 1)}button</button>
	  <Count />
    </>
}


const Counter = ()=> {
  return <div>counter</div>
}

여기서 const a=3 구문은 state값이 바뀔때마다 매번 정의된다.
또한 Count컴포넌트는 react에서 얘기하는 리랜더가 된 상태이지만(리액트팀이 말하는 랜더와 보편적으로 알고 있다.) dom값 변화가 없기 때문에 화면적으로 다시 페인트 되지 않는다.