[React] Rendering elements

!해당 포스트는 처음 만난 리액트(React) - 소플 강의를 수강하면서 정리한 내용임.

 

elements란?

• 어떤 물체를 구성하는 성분
• 리액트 앱을 구성하는 가장 작은 블록들

 

리액트 elements는 자바스크립트 객체 형태로 존재

• type에 문자열로 된 html 태그가 아닌, react 컴포넌트의 이름이 들어가 있음.
• 객체를 만드는 역할을 하는것이 createElement 함수

type: Button,
props: {
	color: 'green',
	children: 'Hello, element!'
	}
}

 

 

Elements의 특징

• 불변성을 가지고 있음
  • elements 생성 후에는 children이나 attributes를 바꿀 수 없음.
  • 화면의 새로운 내용을 보여주기 위해서는 새로운 element를 만들어 기존 element가 연결된 부분에 바꿔서 달면 됨.

 

 

Elements 렌더링하기

Root DOM Node

<div id="root"></div>

• 모든 리액트의 필수적으로 들어감
• 실제 div 태그안에 모든것이 리액트DOM에 의해서 관리됨

 

const element = <h1>안녕, 리액트!</h1>;
ReactDOM.render(element, document.getElementById('root'));

첫 번째 파라미터인 react element를 두 번째 파라미터인 html element, 즉 DOM element에 렌더링하는 것을 의미

→ React의 element가 렌더링되는 과정은 virtual DOM에서 실제 DOM으로 이동하는 과정

 

 

렌더링된 Element를 업데이트 하기

 

element는 불변성이 있기 때문에 업데이트X, 새로 생성해야 됨.

 

---

 

const root = ReactDOM.createRoot(document.getElementById('root'));
setInterval(()=>{
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>
  );
}, 1000);

 

setInterval 함수를 사용해서 1000ms마다 root div에 렌더링하도록 만든 코드