반응형
Element
const element = <h1>Hello, world</h1>;리액트의 가장 작은 단위이다. Component와는 다르다!
Element는 Component의 구성요소이며 화면에 렌더링할 DOM 정보를 React에 알려주는 객체이다.
Element가 있기 때문에 값이 변경된 부분만 다시 렌더링 할 수 있다. 어떻게 가능할까?
JS의 경우
<html>
<head>
<meta charset="utf-8">
<title>Hello HTML!</title>
</head>
<body>
<div id="root" class="root">
</div>
<script>
const root = document.getElementById('root');
//현재 시간을 보여주도록 코드 작성
function tick() {
//element선언
const element = `
<div>
<h1>Hello, world!</h1>
<h2>It is ${new Date().toLocaleTimeString()}.</h2>
</div>
`;
//root 하위의 HTML코드를 element로 변경한다
root.innerHTML = element;
}
//1초에 한번씩 tick()함수를 호출한다.
setInterval(tick, 1000);
</script>
</body>
</html>
변경점은 시간 뿐임에도 불구하고 root부터 모든 태그가 전체적으로 다 변경된다.
React의 경우
//root 아이디를 가진 태그를 찾아서 루트로 선언한다
const root = ReactDOM.createRoot(
document.getElementById('root')
);
//현재 시간을 보여주도록 jsx 작성
function tick() {
//element선언
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
//root에 element를 렌더링해달라고 한다
root.render(element);
}
//1초에 한번씩 tick()함수를 호출한다.
setInterval(tick, 1000);
똑같이 tick() 함수를 호출하는데 시간 부분만 변경된다.
React Element의 장점은?
만약 tick() 함수가 여러 태그를 바라보고있고, 내부가 복잡하다고 가정할 때
JS는 실제로 변경점이 없는 태그들 까지도 모두 변경되기 때문에 의도하지 않은 사이드이펙트가 발생될 확률이 높다.
반면에 React는 변경점만 변경되기 때문에 사이드이펙트에 대한 고민을 덜어낼 수 있다!
반응형
'Front' 카테고리의 다른 글
| [React] Component, Props란? 클래스형/함수형 컴포넌트, 컴포넌트에 변수 전달하기 (0) | 2023.02.04 |
|---|---|
| [React] JSX(JavaScript XML) 문법 (0) | 2023.01.27 |
| [React] 프로젝트 셋팅 (0) | 2023.01.05 |
| [Swiper] 스와이퍼 한 페이지에 여러개 사용하기. Multiple Swiper (0) | 2021.12.17 |
| [Swiper] 스와이퍼 오류 Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. (2) | 2021.12.17 |
