[React] React Element, Component

---

React Element

💡 리액트 앱들의 가장 작은 building block이다

 

• React element는 DOM element의 가상표현이다
• React element는 화면에 보이는 것들을 기술한다
• React element는 자바스크립트 객체 형태로 존재한다(불변성의 특징을 가짐)

 

const element = <h1>Hello, World</h1>;

 

실행될 때 createElement() -> React element 생성 -> DOM element 생성된다

---

React element 특징

React element는 불변성 특징을 가지고 있다

즉, element 생성 후 자식이나 속성을 바꿀 수 없다(업데이트 하려면 element를 재생성해야 한다)

 

리액트의 장점 중 빠른 랜더링 속도는 virtual DOM을 사용하기 때문이다

 

/* Root DOM Node */

<div id="root></div>

 

Root DOM Node에 element 렌더링하는 방법

*렌더링: virtual DOM에서 실제 DOM으로 이동하는 것

 

const element = <h1>Hi, React! </h1>;
ReactDOM.render(element, document.getElementById('root'));

 

 

 

 

---

React Component

💡 React는 component 기반이다
     레고 조립하듯 컴포넌트들을 모아서 개발한다

 

 

props(입력) -> React component -> React element(출력)

 

 

---

props(property)

💡 컴포넌트에 전달할 다양한 정보를 담고있는 자바스크립트 객체

---

props 특징

• 값을 변경할 수 없다(Read-only)
• pure함수 같은 역할을 해야한다

pure 함수	impure 함수
입력값이 변경되지 않고, 같은 입력값일 경우 항상 같은 출력값을 가짐	입력값이 변경됨

---

컴포넌트의 종류

• Function Component(Hook)
• class Component

 

컴포넌트 종류 비교하기

// Function Component

function Welcome(props) {
   return <h1>Hi, {props.name}</h1>;
}

// class Component

class Welcome extends React.Components {
   render() {
      return<h1>Hi, {this.props.name}</h1>;
   }
}

 

💡 컴포넌트 이름은 "대문자"로 시작해야 한다
     (소문자로 시작하면 DOM 태그로 인식한다 ex. div, span, ...)

---

컴포넌트 랜더링

function Welcome(props) {
   return <h1>Hi, {props.name}</h1>;
}


const element = <Welcome name="연수" />;
ReactDOM.render(
   element,
   document.getElementById('root')
);

 

1. "연수"를 파라미터로 하는 render 함수 호출

2. name이 "연수"인 element 생성

3. 실제 DOM에 업데이트

4. 사용자에게 보임