자바개발자 리엑트 배우기 - State(자바를 비유로)

In Java, an object's state is represented by its instance variables. Each instance variable represents a piece of data that belongs to the object.

For example, if we had a Java class called Counter, it might look like this:

public class Counter {
    private int counterValue;

    public Counter() {
        this.counterValue = 0; // initialize counter value
    }

    public void incrementCounter() {
        this.counterValue = this.counterValue + 1;
    }

    public int getCounterValue() {
        return this.counterValue;
    }
}

In this Java example, counterValue is an instance variable that represents the state of a Counter object. The incrementCounter method updates this state.

Similarly in React, a component's state is like its instance variables. A piece of data in a component's state is like an instance variable in a Java object. It represents some part of the object's (or component's) state.

In the earlier JavaScript example, counter is a property on the state object, like counterValue is a field on the Counter object in Java.

The expression this.state.counter + 1 in JavaScript is similar to the expression this.counterValue + 1 in Java. They both represent the current value of the counter incremented by 1.

The method setState({ counter: this.state.counter + 1 }) in JavaScript is similar to the method incrementCounter() in Java. They both update the state of the object.