react render 개념에 대해서 궁금합니다. 크롬에서 랜더링 확인 ?

Question

function tick() { /*const element = (

현재 시각은 [{new Date().toLocaleTimeString()}]입니다.

); ReactDOM.render(element, document.querySelector('.root')); */ const element = '

현재 시각은 [ ' + new Date().toLocaleTimeString()} + ']입니다.

'; document.querySelector('.root').innerHTML = element; } setInterval(tick, 1000); 위 코드에서 주석처리한 소스는 인터넷에서 코드팬으로 리엑트를 배우는 과정에서 보여준 소스인데요."실제로 크롬(Chrome) 브라우저에서 렌더링 되는 것을 확인해 보시면 시각에 해당하는 부분만 다시 렌더링 되는 것을 확인할 수 있습니다." 라고 하는데, 1. 크롬에서 랜더링 되는 것을 확인한다는게 어떻게 확인하는지..2. 자바스크립트로 짠 소스랑 react render를 이용한 소스랑 차이점이 무엇인가요 ?소스출처: https://ndb796.tistory.com/204?category=1029507 [안경잡이개발자]

ybleeho · Answer

chorme react developer tools extension

프리랜서 개발자 · Answer

&#64;북조선개발자리엑트 디버깅 툴을 설치하면 거기서 랜더링하는걸 확인 할 수 있다는건가요 ?

ybleeho · Answer

네 componets -> settting ->Highlight updates when components render 를 체크해주면 됩니다

프리랜서 개발자 · Answer

&#64;북조선개발자감사합니다 !

LeeCoder · Answer

class 기반 리액트를 쓰신다면 componentDidmount 함수안에 console.log() 로 찍어서 렌더되는걸 확인할수 잇고요react hooks (function 기반 리액트)를 쓰신다면 useEffect 함수안에 console.log() 로 확인이 가능합니다.두 함수 모두 컴포넌트가 렌더될때 호출되는 함수입니다.

react render 개념에 대해서 궁금합니다. 크롬에서 랜더링 확인 ?

5개의 답변

Q&A 목록