출처 : 소플의 처음 만난 리액트
Element
리액트의 엘리먼트는 리액트 앱을 구성하는 요소를 의미한다.
Elements are the smallest building blocks of React apps. 즉 엘린먼트는 리액트 앱의 가장 작은 빌딩 블록들이라는 의미가 된다,.
엘리멘트는 원래 웹사이트에 대한 모든 정보를 담고 이는 객체인 DOM(document object model)에서 사용하는 용어이다.
리액트 엘리멘트는 DOM 엘리먼트의 가상표현이라고 할수 있다.
엘리먼트의 생김새
리액트 엘리먼트는 자바스크립트 객체 형태로 존재한다.
{
type : 'button',
props: {
className: 'bg-green',
children: {
type: 'b',
props: {
children: 'Hellom element!'
}
}
}
}위 코드는 버튼을 나타내기 위한 엘리먼트이다. 즉 단순한 자바스크립트 객체임을 알 수 있다. 위 엘리먼트가 실제로 랜더링이 된다면 아래와 같은 DOM 엘리먼트가 될 것이다.
<button class = 'bg-green'>
<b>
Hello,element!
</b>
</button>엘리먼트의 type에 HTML 태그 이름이 문자열로 들어가는 것이 아닌 경우에는 어떻게 될까?
{
type: Button,
props: {
color: 'green',
children: 'Hello, element!'
}
}리액트 엘리먼트는 자바스크립트 객체 형태로 존재한다. 그리고 이 객체를 만드는 역할을 하는 것이 바로 앞에서 나왔던 createElement() 함수이다.
React.createElement(
type,
[props],
[...children]
}리액트의 특징
불변성(immutable)
Elements 생성후에는 children이나 attributes를 바꿀 수 없다.
화면에 변경된 엘리먼트들을 보여 주기 위해서는 기존 엘리먼트를 변경하는 것이 아니라 새로운 엘리먼트를 만든다.
새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기하는 것이다.
엘리먼트는 불변성을 갖고 있기 때문에 화면에 새로운 내용을 보여 주기 위해 새로운 엘리먼트를 만들어서 기존 엘리먼트가 연결되어 있느 부분에 바꿔 달면 된다.
Elements 렌더링하기
Root DOM Node
<div id="root"></div>위에서 리액트 엘리먼트를 렌더링하기 위해서는 아래와 같은 코드를 사용한다.
const element = <h1>안녕, 리액트!</h1>;
const root = ReactDOM.createRoot(document.getElementByid('root'));
root.render(element);실습 시계 만들기
vs code 터미널에 npx create-react-app 프로젝트이름 > cd-프로젝트이름 > start npm 까지는 이제 알것이다.
만들어진 프로젝트에 src 안에 폴더를 생성하고 그 폴더안에 jsx 파일을 만든다.
위 import는 그냥 디폴트라고 생각하자. 템플릿처럼 쓰인다.
마지막 export도 ㅇㅇ!
만든 컴포넌트를 실제 화면에 렌더링하기 위해서 index.js 파일을 수정한다.
setInterval()함수로 1,000ms(1초)마다 새롭게 Clock 컴포넌트를 root div에 렌더링 하도록 코드를 수정한다.
초마다 렌더링 됨 !
