본문 바로가기

언어 Language20

[React] useEffect 와 useLayoutEffect 의 차이는? useEffect 와 useLayoutEffect 의 차이는? 먼저 훅의 실행 흐름과 Render, paint 의 개념을 알아두면 좋다. Render (레이아웃 배치) DOM tree를 만들기위해서 HTML파일을 파싱하는 style 속성을 계산하는과정. paint (그리기) 실제 화면에 그려주기위해 Layout을 표시하고 업데이트하는 과정. useEfffect useEffect 는 컴포넌트 레이아웃 배치(render)와 그리기(paint)를 완료한 후 비동기적(asynchronous)으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom에 영향을 주는 코드가 있을 경우, 사용자 입장에서는 화면의 깜빡임을 보게 됩니다. useLayoutEffect useLayoutEffect.. 2022. 6. 8.
[JavaScript] 반복적인 코드 실행 setInterval, clearInterval setInterval() Javascript에서 함수를 주기적으로 반복적으로 실행하고 종료하기 위해서는 setInterval() 을 사용한다. setInterval() 함수는 일정시간 주기로, 반복적으로 함수나 코드를 수행하는 함수이다. setInterval(function, delay millisecond, function parameters) 이 함수는 아래 매개변수를 입력 받습니다. function : 주기적, 반복적으로 실행할 함수 delay millisecond (optional) : 시간 간격 (밀리세컨드 단위) function parameters (optional) : 첫번째 파라미터의 함수에 전달할 파라미터 이 함수는 리턴으로 intervalID 값을 반환합니다. 이 값은 clearInte.. 2022. 6. 3.