[React] 시계 만들기 (Reandering Elements)

• 1초마다 렌더링을 하며 시간을 알려주는 시계를 만들어 보았습니다

1초마다 렌더링을 하며 변동되는 시간을 알려주는 시계 제작 코드

 

• Elements는 한번 생성되면 변경할 수 없음
• React의 Elements는 변하지 않는 성질을 가지고 있어 생성 후 children또는 attributes를 변경할 수 없으며
• 화면에 생성된 Elements를 업데이트하기 위해서는 기존 Elements를 변경하는 것이 아닌 새로운 Elements를 생성하면 됨
• React가 렌더링되는 과정은 VirtualDOM(React 엘리먼트)에서 실제 DOM(DOM 엘리먼트)으로 이동하는 과정

 

 

• 작성한 소스코드를 웹사이트로 실행하고 개발자 모드인 F12를 눌렀을 때 1초씩 지날 때마다 개발자 모드의 코드가 깜빡깜빡 거리며 시간이 변경이 되는 시계를 완성하였음
• 라이브러리 불러오는 곳에서 아직 실수를 해서 오류가 나기도 했지만 이제 해결하는 방법을 알게 되었고 이러한 기능을 사용하여 다양한 웹사이트에서 활용을 해보고 싶다는 생각이 들었습니다