참고자료: 인프런-리액트강의
[무료] 처음 만난 리액트(React) - 인프런 | 강의
자바스크립트와 CSS 기초 문법과 함께 리액트의 기초를 탄탄하게 다질 수 있습니다., 깔끔한 강의자료, 꼼꼼한 설명으로쉽게 배우는 리액트 강의입니다. 👨🏫 리액트의 세계로초대합니다 💫
www.inflearn.com
element:
리액트 앱을 구성하는 가장 작은 블록들
DOM element라는 것도 있다!
그거는 흔히 보는 <div>, <body>태그 같은 html에서 주로 사용하는 것들
리액트 element는 dom element의 가상 표현 같은 느낌
리액트 element 다음 DOM element로 이어짐(렌더링) => 가장 중요한 느낌!
element는 실제 화면에 보이는 것들을 기술한 것
이 간단한 코드가 바로 엘리먼트!
이 리액트 엘리먼트가 DOM 엘리먼트로 이어지면서 DOM 엘리먼트를 생성하게 되는것
앞에서 언급 한 것처럼 리액트 element 다음 DOM element로 이어짐(렌더링)
1. element의 생김새
- 리액트 엘리먼트는 자바스크립트의 객체 형태로 존재 (불변성)
이 코드는 단순한 자바스크립트 코드로 만든 엘리먼트 객체
그리고 이게 실제로 DOM에 렌더링이 된다면,
이렇게 표현이 되겠지?
이처럼 리액트 엘리먼트는 자바스크립트의 객체 형태로 존재한다. 그리고 이 객체를 만드는 역할이 createElement라는 함수고.
(중략... 많이 생략하고... 이해되면 업로드하겠다....)
아무튼 이것들을 총정리해서 설명하면,
예시)
이 리액트 엘리먼트들은
이런식의 DOM엘리먼트 객체로 렌더링 될 것이다.
2. element의 특징
1. 불변성 = immutable
- 엘리먼트가 생성 후에는 children이나 attribute를 바꿀 수 없다!
그러면 화면 갱신이 안되는건가..?
아니야! 새로운 엘리먼트를 만들면 돼! 기존 엘리먼트와 새로운 엘리먼트를 바꿔치기 하면 돼!
그렇다면 이걸 인지하고 엘리먼트를 직접 렌더링해보자
간단하지만 중요한 코드
div 태그 안에 root라는 아이디를 지정해놓는다.
그리고 root div에 실제로 리액트 엘리먼트를 렌더링하기 위해 다음과 같은 코드를 사용한다.
여기서 참고로 다시 주의할 점!
리액트 엘리먼트와 돔 엘리먼트는 다른개념이야
리액트 엘리먼트는 react vertural DOM에 존재하는거고, DOM element는 실제 브라우저 DOM에 존재하는거얌!!
즉, 리액트 엘리먼트가 렌더링하는 과정은 vertural DOM에서 실제 DOM으로 이동하는 과정!
그럼, 렌더링한 elements를 업데이트를 할려면?
엘리먼트를 업데이트할려면 다시 정의해야 돼 (왜냐면 불변성이라는 특징 때문에)
이 코드로 매초마다 새로운 초단위가 보이게 될 것인데,
이거는 기존 엘리먼트를 변경해서 나오는 것이 아니라,
새로운 엘리먼트를 생성해서 바꿔치기 하는 거야!
다시 정리하면,
리액트 엘리먼트의 내용을 바꿀려면 새로운 엘리먼트를 사용해 바꿔치기한다는 것, 이것만 잘 기억해두자
'React의 고수 🟢' 카테고리의 다른 글
| 컴포넌트 라이프사이클, DOM 정리 ✨ (0) | 2024.01.18 |
|---|---|
| 리액트 - component, props (0) | 2023.09.24 |
| 리액트 -JSX (0) | 2023.09.24 |
| 리액트 - forms (0) | 2023.09.23 |
| 리액트 - List and Keys (0) | 2023.09.23 |
