비동기

우연히 글을 보다가 useState()가 비동기방식이라는 것을 알 수 있었다. 근데 react 코드를 짜면서 느낄 수 있는 부분들이 많아 놀랍지는 않았지만, 개념으로 확인시켜주니 좋았다. 그래서 비동기방식으로 처리할 때 불편함이 있어 동기 방식으로 처리하는 방식을 알고자 정리하게 되었다. 개념 const로 선언하는 이유는? 변수의 재할당을 막기 위해서 let을 사용하면 변수의 재선언이 가능해지기 때문에, 이를 방지하고 setState를 사용한 변수 변경만을 허락하기 위해서 const로 선언 state를 사용하는 이유 변수는 변경되어도 자동으로 화면이 바뀌지 않는다. setState를 사용시 state가 변경되면 자동으로 화면이 바뀌기 때문에 state를 사용한다. 비동기 방식 우선 개념에 대해서 보면, ..

필수 개념 Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정 Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정 즉 시각적 변경 사항이 사용자에게 표시되는 것을 말함. 개념 1) useEffect useEffect는 컴포넌트들이 render와 paint된 후 실행된다. 이는 **비동기적(asynchronous)**으로 실행된다. paint된 후 실행되기 때문에, useEffect내부에 DOM에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게된다. 2) useLayoutEffect useLayoutEffect는 컴포넌트들이 render된 후 실행되며, 그 이후에 paint가 되게 된다. 이 작업은 동기적(synchronous) ..