*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.
목차
1. Elements란?
2. createElement가 동작하는 과정
3. React elements의 특징
4. Elements 렌더링하기
1. Elements란?
Elements의 영단어는 어떤 물체를 구성하는 요소, 성분이라는 뜻인데
마찬가지로 여기서 배우는 Elements도 리액트 앱을 구성하는 요소를 뜻한다.
아래는 공식사이트에서 elements를 설명하고 있는 문장인데 Elements는 리액트 앱에서 가장 작은 블록들이라고 적혀있다.
이렇게 Chrome 브라우저에서 개발자도구의 Elements에서 볼 수 있는 것은 React Elements가 아니라 Dom Elements이다.
리액트를 개발하기 시작한 아주 초장기에 화면에 나타나는 내용을 기술하는 자바스크립트 객체를 일컫는 용어가 필요했는데 처음에는 Descriptor이라고 불리다가 최종적으로 나타나는 형태는 DOM Elements여서
통일성을 위해 똑같이 Elements라 부르기로 결정했다.
즉, 아래와 같이 createElement(현재는 다른 방식으로 사용됨)의 결과로 객체가 생성되는데 그게 element이다.
React elements는 앞에서 배웠던 Virtual DOM의 Elements를 나타낸다.
Elements는 화면에서 보이는 것들을 기술하는데 아래와 같은 JSX코드를 작성하면 내부적으로는 JS코드로 변환하여
React Elements가 생성된다
Element는 HTML에서 태그로 적은 노드들을 지칭하므로 가상DOM에 <h1> element가 만들어지는 것이다.
이 React Elements는 앞에서도 말했지만 자바스크립트 객체 형태로 존재하며
마음대로 변경할 수 없는 불변성을 가지고 있다
아래는 button을 나타내기위한 Element이다
(JSX코드가 JS코드로 바뀌면서 생성되는 자바스크립트 객체인 element)
위 코드를 렌더링하면 아래와 같은 DOM element가 된다
2. createElement의 동작과정
다시 복습을 하면 아래와 같은 JSX코드를 내부적으로는 바벨이 JS코드로 변환시키는데 그 변환시킨 JS코드가 createElement이고 그 createElement를 사용하면 자바스크립트 객체인 React Element가 만들어진다.
아래는 React.createElement의 구조인데
type에는 문자열로된 html태그나 또다른 React Component가 들어간다.
모든 React Component는 최종적으로는 html태그를 사용하게된다.(하나의 컴포넌트는 여러개의 자식 컴포넌트로 구성되며 그 자식 컴포넌트를 분해하면 결국 html태그가 남게 된다)
props는 일단 간단하게 속성이라고 생각하면 되는데 태그에 class나 style같은 속성을 attribute라고 하는데 이 attribute보다 상위에 있는 복잡한 개념이고 일단 대충 속성이라는 것이라고 알고 넘어가자.
children은 해당 element의 자식 element가 여기 들어가게 된다.
아래에는 Button 컴포넌트와 ConfirmDialog 컴포넌트가 있는데
ConfirmDialog 컴포넌트가 Button 컴포넌트를 포함하고 있다
이런 ConfirmDiag 컴포넌트의 element의 형태는 어떻게 될까?
바로 다음과 같이 된다.
1번째 children은 p태그이고
2번째 children은 리액트 component인 Button component이며
confirmdiag컴포넌트 element는 button컴포넌트의 element를 만들어서 합치게 된다
그래서 최종적으로 confirmDiag 컴포넌트의 element의 형태는 다음과 같다.
3. React elements의 특징
1) 불변성(immutable)
Element가 변하지 않는다면 화면이 어떻게 업데이트되는 것인가 궁금할 것이다.
아래는 붕어빵을 예로 든 것이다.
붕어빵 틀로 붕어빵을 만드는데 안에 있는 붕어빵 앙코(팥소)를 바꿀 수 없는 것과 같은 이치이다.
앙코를 바꿀 순 없으니 새로 붕어빵을 만들어서 바꿔치기 하면 된다.
Virtual DOM의 개념을 다시한번 상기시키면 된다.
바뀐 Element를 업데이트한다.
리액트로 개발을 하다보면 상태관리와 더불어 화면이 얼마나 자주바뀌는지가 성능에 큰 영향을 미친다
4. Elements 렌더링하기
element를 만든 이후 화면에 보여주기 위해서는 렌더링이라는 과정을 거쳐야 한다
먼저 아래 코드를 보자.
아래 코드는 id가 root인 div태그이다.
아주 간단한 코드이지만 모든 리액트 앱에 들어가는 아주 중요한 코드이다.
실제로 이 div 태그안에 react element가 렌더링되며 이것을 root DOM node라고 한다.
div태그에 들어있는 모든 것이 react element에 의해 관리된다.
오직 리액트만으로 만들어진 모든 웹사이트들은 단 하나의 root DOM node를 가지며
기존에 있는 웹사이트에 리액트를 추가적으로 연동하게 되면 여러개의 분리된 수많은 root DOM node를 가질 수 있다
아래와 같이 최상단에 있는 node가 Root DOM Node이다
위 같은 div태그에react element를 렌더링하기 위해서는 다음과 같은 코드를 사용한다
element를 먼저 생성하고 생성된 element를 root div태그에 렌더링하는 코드이다.
이때 사용되는 render라는 함수는 render(a , b )의 형태에서
react elements인 a를
html elements(Dom elements)인 b에 렌더링하는 역할을 한다.
오늘의 핵심은 다음과 같다.
element는 한번 생성되면 바뀔 수 없으므로 업데이트를 하기 위해서는 다시 생성해야한다.
참고문헌
'React' 카테고리의 다른 글
| 리액트로 영화 평점 웹서비스 만들기(클론코딩) 1탄 (0) | 2023.06.05 |
|---|---|
| 8. 리액트 입문-Props가 뭐고 Component는 뭘까 (0) | 2023.06.04 |
| 6. 리액트 입문-JSX가 뭘까 (0) | 2023.06.02 |
| 5. 리액트 입문-Create-react-app (0) | 2023.06.01 |
| 4. 리액트 입문-리액트는 무엇이며 Virtual DOM은 무엇인가 (0) | 2023.05.31 |