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

aksen5240·2024년 1월 1일

목록 보기

2/14

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

웹 개발에 리액트를 사용한다면, 리액트 엘리먼트와 컴포넌트라는 두 가지 기본적인 개념을 반드시 이해해야 한다.

엘리먼트는 리액트 애플리케이션의 가장 작은 단위로, 화면에 표시되는 내용을 기술한다. 반면, 컴포넌트는 이러한 엘리먼트들을 조합하고 재사용 가능한 코드 블록을 형성한다.

이 두 개념의 차이를 이해하는 것은 리액트를 사용한 웹 개발의 핵심이다. 이번 글을 통해 이들 각각의 역할, 사용 방법, 그리고 어떻게 서로 상호작용하는지에 대해 자세히 살펴보면서, 리액트의 효과적인 사용 방법을 알아보고, 리액트의 세계로 한 걸음 더 깊이 들어가 보자.

리액트 엘리먼트(Element)

📌 리액트 엘리먼트란?

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로 렌더링을 해 브라우저에 띄워준다.

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

리액트 컴포넌트(Component)

📌 리액트 컴포넌트란?

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

가장 간단한 컴포넌트 생성 방법은 자바스크립트 함수를 사용하는 것이다. 리액트 엘리먼트를 함수 형태로 만들어내면 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 />
  </>
);

컴포넌트를 사용하면 화면을 구성할 때 목적에 따라 코드를 세분화할 수 있고, 재사용할 때도 유용하게 활용할 수 있기 때문에 유지 보수가 용이해진다. 또한, 모듈 문법을 활용하여 컴포넌트를 독립적으로 만들 수도 있다.

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

반복적인 개발이 줄어든다.

오류를 고치기 쉽다.

일을 쉽게 나눌 수 있다.

cf> 컴포넌트를 독립적으로 만든 예 (파일을 분리해 관리하는 법)

예를 들어, 'Card.js'와 'App.js' 파일을 분리하여 관리할 수 있다.

// Card.js
import cardImage from './assets/card-image.svg'; // 카드 이미지 경로

function Card() {
  return <img src={cardImage} alt="카드" />;
}

export default Card;


// App.js
import Card from './Card';

function App() {
  return (
    <div>
      <Card />
    </div>
  );
}

export default App;