React Component, Element

 

기능 구현을 하다보면 가끔 component랑 element의 정확한 뜻이 헷갈려서

어? 배웠는데 뭐지? 하는 경우가 생겨서 다시 정리를 해본다...⭐

엘리먼트는 리액트 애플리케이션의 가장 작은 단위로, 화면에 표시되는 내용을 기술한다. 

반면, 컴포넌트는 이러한 엘리먼트들을 조합하고 재사용 가능한 코드 블록을 형성한다.

 

📌 리액트 컴포넌트란?

이제 리액트 컴포넌트에 대해 알아보자. 리액트 컴포넌트는 엘리먼트를 좀 더 자유롭게 다루기 위한 문법이다.

가장 간단한 컴포넌트 생성 방법은 자바스크립트 함수를 사용하는 것이다.

리액트 엘리먼트를 함수 형태로 만들어내면 JSX 문법을 작성할 때 커스텀 태그처럼 활용할 수 있다.

아래 코드에서 볼 수 있는 Hello 함수가 하나의 예시이다.

import ReactDOM from 'react-dom/client';

function Hello() {
  return <h1>Hi React!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <>
    <Hello />
    <Hello />
    <Hello />
  </>
);

 

컴포넌트를 사용하면 화면을 구성할 때 목적에 따라 코드를 세분화할 수 있고,

재사용할 때도 유용하게 활용할 수 있기 때문에 유지 보수가 용이해진다.

또한, 모듈 문법을 활용하여 컴포넌트를 독립적으로 만들 수도 있다.

 

컴포넌트를 사용했을 때 장점

• 반복적인 개발이 줄어든다.
• 오류를 고치기 쉽다.
• 일을 쉽게 나눌 수 있다.

 

 

📌 리액트 엘리먼트란?

JSX 문법으로 작성한 요소는 결국 자바스크립트 객체로 변환된다. 예를 들어, 다음과 같은 코드를 보면

import ReactDOM from 'react-dom/client';

const element = <h1>안녕 리액트!</h1>;
console.log(element);

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

 

이 코드에서 element 변수는 리액트 엘리먼트라고 부른다.

이 엘리먼트는 ReactDOM.render 함수의 아규먼트(argument, 전달인자)로 전달되며,

리액트는 이 객체를 해석해서 HTML로 렌더링을 해 브라우저에 띄워준다.

결과적으로, 리액트 엘리먼트는 리액트로 화면을 구성하는데 있어 가장 기본적이면서도 핵심적인 요소라고 할 수 있다.

 

 

 

 

참고 블로그

엘리먼트(Element)와 컴포넌트(Component): 리액트 사용을 위한 핵심 개념