[Element&Component]

Element

1. 실제로 대부분의 React 앱은 root.render()를 한 번만 호출.

2. React 엘리먼트는 불변객체. 
- 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없음.
- 엘리먼트는 영화에서 하나의 프레임과 같이 특정 시점의 UI를 보여줌.

=>  UI를 업데이트하는 유일한 방법은 새로운 엘리먼트를 생성하고 이를 root.render()로 전달하는 것


3. 변경된 부분만 업데이트 
React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트(페이지 전체를 re-loading 하지 않음)

 

Component

일반적으로 새 React 앱은 최상위에 단일 App 컴포넌트를 가지고 있습니다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;

root.render(element);

자의적 해석

1. window가 root.render(element); 콜(호출)
2. root.render 가  const element = <Welcome name="Sara" />; 호출
3. const element = <Welcome name="Sara" />;에 {name : 'Sara'}가 Welcome component 호출
4. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환 .
주의: 컴포넌트의 이름은 항상 대문자로 시작합니다.


공식문서 component 호출 설명

1. <Welcome name="Sara" /> 엘리먼트로 root.render()를 호출합니다.
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출합니다.
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트합니다.

출처 https://ko.legacy.reactjs.org/docs/components-and-props.html