React2 State and LifeCycle(생명주기) element 렌더링을 이용한 째깍거리는 시계 예시 const root = ReactDOM.createRoot(document.getElementById('root')); function tick(){ const element = ( Hello, world It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); Clock 컴포넌트를 만들어서 완전히 재사용 하고 캡슐화 하는 방법 const root = ReactDOM.createRoot(document.getElementById('root')); function Clock(props){ return( Hello, world! It is {prop.. 2023. 3. 7. element(엘리먼트) element(엘리먼트) - 엘리먼트는 React 앱의 가장 작은 단위 이다. - 엘리먼트는 화면에 표시할 내용을 기술 한다. const element = Hello, world; - 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체(plain object)이고 쉽게 생성 가능하다. - React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트 한다. DOM에 엘리먼트 렌더링 하기 - HTML 파일 어딘가에 가 있다고 가정 - 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 "루트(root)" DOM 노드라고 한다. - React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있다. - React를 기존 앱에 통합하려는 경우 원하는 만.. 2023. 3. 4. 이전 1 다음