[React] Element, Component, Instance의 차이

이전 글에서 함수 컴포넌트는 인스턴스를 갖지 않기 때문에 ref가 존재하지 않는다고 잠깐 언급하였다. 이를 보고 인스턴스가 무엇인지, 그리고 컴포넌트와의 차이는 무엇인지가 궁금해져서 더 알아보았다. 또한 엘리먼트와도 함께 비교해보았다.

Element

엘리먼트는 UI를 나타내기 위한 가장 작은 단위이다. 보통 일반 자바스크립트 객체(plain JavaScript object)로 표현되는데, 이는 type과 props 필드로 구성되며 아래와 같이 나타낸다.

{
  type: "button",
  props: {
    className: "btn-style"
  }
}

위 엘리먼트는 React의 JSX 문법을 통해 아래와 같이 표현된다.

const element = <button className="btn-style">Click</button>;

 

Component

컴포넌트는 특정 기능을 수행하는 재사용 가능하고 독립적인 UI 단위이다. 엘리먼트와 달리 컴포넌트는 논리, 상태 등 더 많은 것을 포함한다.

const Button = (props) => {
  return <button>{props.title}</button>;
}

 

Instance

인스턴스는 "클래스" 컴포넌트의 실제 발생이나 표현이라고 생각하면 된다. 위의 Button 컴포넌트를 예로 들면, 이 컴포넌트를 정의한 후에는 여러 군데에서 이를 불러 쓸 수 있을 것이다. 이때 인스턴스가 생성된다. 각 인스턴스는 전달하는 props, 스타일, 기능 등이 모두 다를 테지만, 기본적으로 모두 Button 컴포넌트의 기본 특성을 공유한다.

 

 

그렇다면 '함수 컴포넌트는 인스턴스를 갖지 않기 때문에 ref가 존재하지 않는다' 라는 말은 무슨 뜻일까?

우선 위에 언급했듯 클래스 컴포넌트의 경우, 컴포넌트를 렌더링할 때마다 해당 클래스의 인스턴스가 생성된다. 인스턴스는 고유한 상태, 수명 주기 메서드를 가진다.

그러나, 함수 컴포넌트는 클래스 컴포넌트처럼 자체 인스턴스를 갖지 않는다. 함수 컴포넌트는 렌더링할 때마다 일반 JavaScript 함수를 호출하는 것과 같기 때문에 클래스 컴포넌트와 달리 고유한 상태나 수명 주기 메서드 등의 고유 속성을 가지지 않는다. 따라서 ref 또한 존재하지 않는다. 대신에 useState, useEffect 등의 React Hooks를 사용하여 클래스 컴포넌트와 비슷하게 관리할 수 있으며, ref를 전달하고 싶다면 forwardRef를 사용할 수 있다.