Design Systems & Component Libraries · 강의

속성, 상태 및 이벤트 처리

구성 요소 내에서 데이터를 전달하고 내부 상태를 관리하며 사용자 상호 작용을 효과적으로 처리하는 방법을 익힙니다.

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

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

Data Flow in Components

Components are the building blocks of UIs. To make them dynamic and interactive, we need ways for them to receive data, manage their own internal information, and react to user actions.

This lesson explores three fundamental concepts: Props, State, and Event Handling. Mastering these allows you to create truly reusable and responsive UI components.

Props: Component Inputs

Props (short for "properties") are how components receive data from their parent components. Think of them like arguments you pass to a function.

They are immutable: a component should never modify its own props.
They enable parent-to-child communication.
They make components reusable by allowing different data inputs.

Passing Data with Props

Here's a simplified example. We'll create a GreetingComponent that takes a name as a prop and displays it. Notice how name is provided when the component is created.

class GreetingComponent {
    private String name; // This acts like a 'prop'

    public GreetingComponent(String name) {
        this.name = name;
    }

    public void render() {
        System.out.println("Hello, " + name + "!");
    }
}

public class Main {
    public static void main(String[] args) {
        // Create a component and pass a 'name' prop
        GreetingComponent userGreeting = new GreetingComponent("Alice");
        userGreeting.render();

        GreetingComponent guestGreeting = new GreetingComponent("Guest");
        guestGreeting.render();
    }
}

Props are Read-Only

A crucial rule for props is that they are read-only. Once a component receives props, it should not try to change them directly.

Why? This ensures predictable behavior, makes debugging easier, and prevents unexpected side effects in other parts of your application. If data needs to change, it should be managed by state (which we'll cover next).

State: Internal, Mutable Data

While props are external inputs, state is a component's own internal data that it manages and can change over time. Think of it as the component's private memory.

It's mutable: components can update their own state.
It controls dynamic behavior and changes in the UI.
Updates to state typically trigger a re-render of the component.

State in Action: A Counter

Let's simulate a simple CounterComponent. It will keep track of a number internally (its state) and have a method to increment that number. Each increment changes its internal state and "re-renders" its display.

class CounterComponent {
    private int count; // This is the component's internal 'state'

    public CounterComponent(int initialCount) {
        this.count = initialCount;
    }

    public void increment() {
        System.out.println("Incrementing...");
        this.count++; // Modifying internal state
        render(); // Simulate re-rendering after state change
    }

    public void render() {
        System.out.println("Current Count: " + count);
    }
}

public class Main {
    public static void main(String[] args) {
        CounterComponent myCounter = new CounterComponent(0);
        myCounter.render(); // Initial display: 0

        myCounter.increment(); // Count becomes 1
        myCounter.increment(); // Count becomes 2
    }
}

Props vs. State: The Distinction

Choosing between props and state can be tricky for beginners. Here's a simple rule:

Use Props: For data passed down from a parent component, or for data that doesn't change within the component itself.
Use State: For data that is managed internally by the component and is expected to change based on user interactions or other events.

If a component needs to change its own data, it needs state. If it just needs to display data given to it, props are sufficient.

Event Handling: Responding to Users

Event handling is how your components react to user interactions, like clicks, key presses, or input changes. When an event occurs, an "event handler" function is triggered.

Event handlers are often used to update a component's state, which then causes the UI to reflect the new data.

Event Handling & State Updates

Let's extend our counter example. We'll simulate a Button that, when "clicked", triggers our CounterComponent to increment its state. This shows how user actions (events) drive state changes.

interface ClickListener { // Simulates an event listener
    void onClick();
}

class Button {
    private String label;
    private ClickListener listener;

    public Button(String label, ClickListener listener) {
        this.label = label;
        this.listener = listener;
    }

    public void simulateClick() {
        System.out.println("Button '" + label + "' was pressed!");
        if (listener != null) {
            listener.onClick(); // Triggers the listener
        }
    }
}

class InteractiveCounter implements ClickListener {
    private int count; // State

    public InteractiveCounter(int initialCount) {
        this.count = initialCount;
    }

    @Override
    public void onClick() { // This is our event handler
        System.out.println("Event received! Updating state...");
        this.count++; // Update state
        render();
    }

    public void render() {
        System.out.println("Displaying Count: " + count);
    }
}

public class Main {
    public static void main(String[] args) {
        InteractiveCounter app = new InteractiveCounter(0);
        app.render(); // Initial display

        // Create a button and link its click event to our counter's handler
        Button incrementBtn = new Button("Increment", app);

        incrementBtn.simulateClick(); // Simulate user click 1
        incrementBtn.simulateClick(); // Simulate user click 2
    }
}

Quick Check: Data Flow

Consider a component that displays a user's profile picture and name. The user can also click a button to "like" the profile, and the like count updates instantly.

Which part of this component would typically be managed by props, and which by state?

Recap: Props, State & Events

Great job! You've learned the core concepts of building interactive UI components:

Props: External, read-only data passed into a component.
State: Internal, mutable data managed by a component, causing re-renders when changed.
Event Handling: Functions that respond to user interactions, often updating state.

These concepts are fundamental to creating dynamic and responsive user interfaces. Keep practicing!

자주 묻는 질문

“속성, 상태 및 이벤트 처리” 강의는 무료인가요?

네 — “속성, 상태 및 이벤트 처리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 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개 중 2번째 강의입니다.

“속성, 상태 및 이벤트 처리” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

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