ReactJS - Web Components: 초보자 가이드

안녕하세요, 야심찬 개발자 여러분! 오늘 우리는 ReactJS와 Web Components의 세계로 흥미로운 여정을 시작할 것입니다. 친절한 이웃 컴퓨터 교사로서 저는 이 모험을 단계별로 안내해 드릴 것입니다. 프로그래밍에 처음이시라면 걱정 마세요 - 우리는 매우 기본적인 것부터 시작하여 조금씩 올라갈 것입니다. 커피(또는 차, 당신이 좋아하는 것)를 한 잔 챙겨서, 같이 뛰어들어 보겠습니다!

Web Components는 무엇인가요?

React에서 Web Components를 사용하기 전에, Web Components가 실제로 무엇인지 이해해 보겠습니다. 상상해 보세요, 당신이 레고 블록(우리의 코드)로 집(우리의 웹사이트)을 짓고 있다면, Web Components는 특별한 레고 조각들입니다. 이 조각들은 한 번 만들어 두면 다른 집(웹사이트)에서 반복적으로 사용할 수 있어 매 번 다시 만들 필요가 없습니다.

Web Components는 재사용 가능한 커스텀 엘리먼트를 만들 수 있도록 해주는 웹 플랫폼 API 세트입니다. 이들은 자신의 기능을 캡슐화하여 다른 프로젝트와 프레임워크 간에서 쉽게 공유할 수 있게 합니다.

React에서 Web Components를 사용하는 이유

이제 여러분은 "React를 사용할 때 Web Components를 왜 귀찮게 사용해야 하지?" 고민할 수도 있습니다. 훌륭한 질문입니다! React는 사용자 인터페이스를 만드는 데 최적이지만, 가끔은 프레임워크에 중립적인 컴포넌트를 사용하거나 React를 사용하지 않는 개발자들과 컴포넌트를 공유하고 싶을 수 있습니다. 이는 Web Components가 빛을 발하는 곳입니다!

시작하기: React 프로젝트 설정

우리는 새로운 React 프로젝트를 설정해 보겠습니다. 걱정 마세요, 단계별로 안내해 드릴 것입니다!

1. 터미널을 엽니다 (무서워하지 마세요, 단순히 컴퓨터와 대화하는 텍스트 기반 방법입니다).
2. 다음 명령어를 실행합니다:

npx create-react-app my-web-components-app
cd my-web-components-app

이 명령어는 새로운 React 앱을 생성하고 프로젝트 디렉토리로 이동합니다. 우리의 레고 집을 짓기 위한 기초를 다리는 것입니다!

첫 번째 Web Component 만들기

이제 우리는 첫 번째 Web Component를 만들어 보겠습니다. 간단한 인사 카드 컴포넌트를 만들겠습니다.

src 폴더에 GreetingCard.js라는 새로운 파일을 만들고 다음 코드를 추가합니다:

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}

connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
</style>
<div class="card">
<h2>Hello, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

이를 쉽게 설명하자면:

1. 우리는 HTMLElement을 확장하는 GreetingCard 클래스를 만듭니다. 이는 우리의 특별한 레고 조각의 블루프린트를 만드는 것입니다.
2. 생성자에서 shadow DOM을 만듭니다. 이는 우리의 컴포넌트의 스타일이 다른 페이지에 새지 않도록 하는 사적인 방입니다.
3. connectedCallback 메서드는 우리의 컴포넌트가 페이지에 추가될 때 호출됩니다. 여기서 우리는 카드의 HTML 구조와 스타일을 설정합니다.
4. 마지막으로, 우리는 새로운 컴포넌트를 customElements.define로 등록하여 브라우저에게 "" 태그를 볼 때 이 블루프린트를 사용하도록 지시합니다!

React에서 Web Component 사용하기

이제 우리의 Web Component가 완성되었으므로, React 앱에서 사용해 보겠습니다. src/App.js를 엽니다 그리고 내용을 다음과 같이 변경합니다:

import React from 'react';
import './GreetingCard';

function App() {
return (
<div className="App">
<h1>My Web Components App</h1>
<greeting-card name="React Developer"></greeting-card>
</div>
);
}

export default App;

이제 무엇이 일어나고 있는지 설명하겠습니다:

1. 우리는 GreetingCard 컴포넌트를 가져옵니다 (이는 브라우저에 등록됩니다).
2. App 컴포넌트에서 "" 태그를 마치 다른 HTML 엘리먼트처럼 사용합니다.
3. 우리는 컴포넌트에 name 어트리뷰트를 전달하여 인사말을 개인화합니다.

앱 실행하기

이제 우리의 창작물을 작동시켜 보겠습니다! 터미널에서 다음 명령어를 실행합니다:

npm start

이 명령어는 React 앱을 시작합니다. 브라우저를 열고 http://localhost:3000에 접속하면, 인사 카드가 페이지에 표시되어야 합니다!

Web Component에 상호작용 추가하기

이제 우리의 인사 카드를 좀 더 상호작용적으로 만들어 보겠습니다. 클릭하면 인사말을 변경하는 버튼을 추가하겠습니다.

GreetingCard.js 파일을 다음과 같이 업데이트합니다:

class GreetingCard extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
this.greetings = ['Hello', 'Bonjour', 'Hola', 'Ciao', 'Konnichiwa'];
this.currentGreeting = 0;
}

connectedCallback() {
this.render();
this.shadowRoot.querySelector('button').addEventListener('click', () => this.changeGreeting());
}

changeGreeting() {
this.currentGreeting = (this.currentGreeting + 1) % this.greetings.length;
this.render();
}

render() {
this.shadowRoot.innerHTML = `
<style>
.card {
border: 2px solid #ccc;
border-radius: 8px;
padding: 16px;
margin: 16px;
font-family: Arial, sans-serif;
}
h2 {
color: #333;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<div class="card">
<h2>${this.greetings[this.currentGreeting]}, ${this.getAttribute('name')}!</h2>
<p>Welcome to the world of Web Components!</p>
<button>Change Greeting</button>
</div>
`;
}
}

customElements.define('greeting-card', GreetingCard);

이 업데이트된 버전에서:

1. 우리는 인사말 배열과 메서드를 추가하여 인사말을 순환시킵니다.
2. render 메서드는 HTML 콘텐츠를 생성합니다.
3. 우리는 카드에 버튼을 추가하고, 버튼 클릭 시 인사말을 변경하는 이벤트 리스너를 추가합니다.

결론

축하합니다! 당신은 첫 번째 Web Component를 만들고 React 애플리케이션에서 사용했습니다. Web Components와 React를 함께 사용할 때의 힘이야말로 이제 막 끝내봤을 뿐입니다.

코드를 짓는 것은 레고로 짓는 것과 같습니다 - 기본적인 것부터 시작하여 조금씩 더 복잡한 구조를 만들어 나갑니다. 연습을 계속하고, 호기심을 유지하며, 두려워하지 말고 실험을 해보세요!

우리가 Web Component에서 사용한 주요 메서드를 요약한 표입니다:

메서드	설명
constructor()	컴포넌트를 초기화하고 shadow DOM을 설정
connectedCallback()	컴포넌트가 DOM에 추가될 때 호출
render()	컴포넌트의 HTML 콘텐츠를 생성
changeGreeting()	인사말을 업데이트

미래의 웹 개발자 여러분, 행복하게 코딩하세요!

Credits: Image by storyset