React) Element, Component 와 Props

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다.

 

Element

`Element` 는 React앱의 가장 작은 단위를 의미합니다. 브라우저 `DOM` 엘리먼트와 달리 `React` 엘리먼트는 일반 객체(plain object)를 의미합니다. `React DOM`은 `React` 엘리먼트와 일치하도록 `DOM`을 업데이트합니다.

주의
더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있습니다. 혼동 되지 않도록 주의합시다

 

 

`React` 엘리먼트는 불변객체입니다. 엘리먼트를 생성한 이후에는 해당 엘리먼트의 자식이나 속성을 변경할 수 없습니다. 엘리먼트는 특정 시점의 `UI`를 보여줍니다. 다음은 `DOM root`에서 생성되는 엘리먼트가 어떻게 렌더링 될 수 있는지 보여주는 코드 입니다 .

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);
}

setInterval(tick, 1000);

 

위의 코드에서 매초 `render` 함수를 호출하고 있지만 실제로는 `render`함수를 한번만 호출을 하고 있습니다. 

 

`React DOM`은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 `DOM`을 원하는 상태로 만드는데 필요한 경우에만 `DOM`을 업데이트 합니다. 

 

Components

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 `JavaScript` 함수와 유사하며, `props`라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 `React 엘리먼트`를 반환합니다.

 

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다. 

const element = <Welcome name="Sara" />;

 

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식 해당 컴포넌트에 단일 객체로 전달합니다. 이 객체를 `props`라고 합니다.

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

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

 

props는 읽기 전용이므로 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안 됩니다.