Design Systems & Component Libraries · 강의

애플리케이션에서 구성 요소 사용하기

다양한 애플리케이션 환경과 프레임워크에서 디자인 시스템의 구성 요소를 효과적으로 가져오고 활용하는 방법을 배웁니다.

애플리케이션에서 구성 요소 사용하기은(는) CoddyKit의 무료 Design Systems & Component Libraries 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Design Systems & Component Libraries 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Design Systems & Component Libraries 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Welcome to Component Consumption!

So you've got a shiny new design system! But how do you actually use those beautiful, pre-built components in your apps?

This lesson will show you how to integrate and utilize components from a design system, making your development process smoother and your UIs more consistent.

The Power of Reusability

Consuming design system components isn't just about making your app look good; it's about efficiency and consistency.

Speed: Build features faster by using pre-made UI blocks.
Consistency: Ensure a unified look and feel across all your products.
Quality: Components are often tested and accessible by default.
Maintainability: Updates to the design system propagate easily.

How Components Are Delivered

Design system components are typically published as packages, similar to other libraries you might use.

These packages are usually distributed via a package manager like npm (Node Package Manager) or Yarn. This allows developers to easily install and update them.

Think of it like an app store for code!

Getting Your Design System Ready

Before you can use components, you need to install the design system package into your project. This is usually a simple command in your terminal.

For example, if your design system components are published under @my-ds/components, you'd run:

npm install @my-ds/components

This command downloads the component library and makes it available to your application.

Bringing Components into Your Code

Once installed, you can import specific components into your application's files. This makes them available for use in your UI.

Imagine you have a Button and a Card component:

import Button from '@my-ds/button';
import Card from '@my-ds/card';

function main() {
  console.log("Components imported successfully!");
  console.log("Ready to use Button and Card in your UI.");
}

main();

Placing Components on the Screen

After importing, you can use the components directly in your application's UI code (e.g., JSX in React, templates in Vue/Angular).

Components often accept props (properties) to customize their appearance or behavior.

import Button from '@my-ds/button';

function renderApp() {
  // In a real app, this would return UI elements.
  // Here, we simulate rendering a primary button.
  const primaryButton = `<button class="ds-button ds-button--primary">Submit</button>`;
  console.log("Rendered a primary button (conceptually):");
  console.log(primaryButton);

  // And a secondary button
  const secondaryButton = `<button class="ds-button ds-button--secondary">Cancel</button>`;
  console.log("Rendered a secondary button (conceptually):");
  console.log(secondaryButton);
}

function main() {
  renderApp();
}

main();

Making Components Interactive

Many components respond to user interactions like clicks, input changes, or hovers. You can attach event handlers to run your own code when these events occur.

This allows your application to react to user actions and update its state.

import Button from '@my-ds/button';

function handleClick() {
  console.log("Button was clicked! Action performed.");
}

function renderApp() {
  // Imagine this button has an onClick prop that calls handleClick
  const interactiveButton = `<button class="ds-button" onclick="handleClick()">Click Me</button>`;
  console.log("Simulating a button click:");
  handleClick(); // Call the handler directly to show its effect
  console.log("Interactive button (conceptually):", interactiveButton);
}

function main() {
  renderApp();
}

main();

How Styles Are Applied

Design system components come with their own styles. How these styles are applied depends on the system:

Global CSS: Styles are loaded once for the whole app.
CSS-in-JS: Styles are coupled directly with components.
Utility classes: Components might expose classes for further customization.

Often, you just import a main stylesheet once, or styles are automatically included with the components themselves.

Global Settings for Components

Some design systems use Context or Providers to manage global settings like themes (light/dark mode), language, or user preferences.

You might wrap your application with a ThemeProvider component to make theme settings available to all components within it, without passing props repeatedly.

Test Your Knowledge

You've learned how to bring design system components into your application and use them.

Which of the following commands is typically used to install a design system component library published as an npm package?

Consuming Components: A Summary

Great job! You've learned the essentials of consuming design system components:

Installing component packages via npm/Yarn.
Importing components into your application.
Using components with props and event handlers.
Understanding how styles and global contexts work.

By leveraging design system components, you build better, more consistent UIs faster. Next, we'll look at handling overrides and customizations.

자주 묻는 질문

“애플리케이션에서 구성 요소 사용하기” 강의는 무료인가요?

네 — “애플리케이션에서 구성 요소 사용하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Design Systems & Component Libraries 강의 전체를 잠금 해제할 수 있습니다. Design Systems & Component Libraries 강의에는 총 4개의 강의가 포함되어 있습니다.

“애플리케이션에서 구성 요소 사용하기”에서 뭘 배우나요?

다양한 애플리케이션 환경과 프레임워크에서 디자인 시스템의 구성 요소를 효과적으로 가져오고 활용하는 방법을 배웁니다. 브라우저에서 직접 실행하는 실습 코드로 Design Systems & Component Libraries을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Design Systems & Component Libraries을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Design Systems & Component Libraries은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“애플리케이션에서 구성 요소 사용하기” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Design Systems & Component Libraries 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Design Systems & Component Libraries 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Design Systems & Component Libraries(으)로 돌아가기