[TIL] 정적・동적 프로퍼티, HTML, JavaScript, Java에서 프로퍼티 차이

in TIL on Til, Java, Javascript, Html Last modified at:

2025-03-08 TIL

📝 TIL (Today I Learned)
🔗 원본 이슈: #24
📅 작성일: 2025-03-08
🔄 최종 수정: 2025년 04월 08일

🍀 새롭게 배운 것

1. 정적 프로퍼티(Static Property) vs. 동적 프로퍼티(Dynamic Property)

1. 정적 프로퍼티 (Static Property)

  • 클래스 단위로 관리되는 속성으로, 특정 인스턴스에 속하지 않고 클래스 자체에 속함.
  • 모든 인스턴스가 공유함.
  • static 키워드를 사용하여 선언.

2. 동적 프로퍼티 (Instance Property)

  • 각 인스턴스에 개별적으로 존재하는 속성.
  • 새로운 인스턴스가 생성될 때마다 독립적으로 할당됨.

✅ 코드 예제 (Java)

class Car {
    static int totalCars = 0; // 정적 프로퍼티 (클래스 변수)
    String model; // 동적 프로퍼티 (인스턴스 변수)

    public Car(String model) {
        this.model = model;
        totalCars++; // 모든 객체가 공유하는 변수 증가
    }

    // 정적 메서드 (클래스 변수 사용 가능)
    static void showTotalCars() {
        System.out.println("총 자동차 수: " + totalCars);
    }
}

public class Main {
    public static void main(String[] args) {
        Car car1 = new Car("Tesla");
        Car car2 = new Car("BMW");

        System.out.println("Car 1 모델: " + car1.model); // 개별 인스턴스 값
        System.out.println("Car 2 모델: " + car2.model);

        Car.showTotalCars(); // 정적 변수는 클래스명으로 접근
    }
}

📝 출력 결과

Car 1 모델: Tesla
Car 2 모델: BMW
총 자동차 수: 2

🔍 요약

구분정적 프로퍼티 (Static)동적 프로퍼티 (Instance)
선언 방법static 키워드 사용일반 변수 선언
속하는 대상클래스 자체개별 인스턴스
공유 여부모든 인스턴스가 공유각 인스턴스마다 별도 존재
접근 방법클래스명.변수명객체명.변수명

정적 프로퍼티는 클래스 전체에서 공유해야 하는 데이터(예: 총 객체 수, 공용 설정값) 관리에 사용하고, 동적 프로퍼티는 개별 객체의 상태를 저장할 때 사용하면 된다! 🚀

2. HTML, JavaScript, Java에서 “프로퍼티(Property)”의 차이 정리

구분HTMLJavaScriptJava
프로퍼티 의미HTML 요소의 속성(Attribute)과 연결된 내부 상태객체(Object)의 속성(Key-Value 쌍)클래스의 멤버 변수(필드)
정적/동적 여부정적 (HTML 태그에서 선언됨)동적 (런타임 중 추가/삭제 가능)정적 (컴파일 시 고정, 객체 생성 후 변경 불가)
접근 방식element.property (DOM API 사용)object.property 또는 object["property"]getter/setter 메서드 사용
예제<input type="text" value="Hello"> → document.querySelector("input").value{ name: "Alice", age: 25 } → person.nameprivate String name; → getName() / setName()
변경 가능 여부변경 가능 (input.value = "New Value")변경 가능 (person.age = 30)직접 변경 불가 (private + getter/setter 필요)
캡슐화없음 (HTML 요소에 직접 접근)없음 (자유롭게 접근 가능)있음 (private로 보호, 메서드를 통해 접근)
동작 방식DOM 요소의 속성과 연결프로토타입 기반 객체 모델 사용클래스 기반 객체 모델 사용

📌 각 프로퍼티 개념 예제

1️⃣ HTML 프로퍼티

<input id="myInput" type="text" value="Hello" />
<script>
  let input = document.getElementById("myInput");
  console.log(input.value); // "Hello"
  input.value = "New Value"; // 프로퍼티 변경 가능
</script>

2️⃣ JavaScript 프로퍼티

const person = {
  name: "Alice",
  age: 25,
};

console.log(person.name); // "Alice"
person.age = 30; // 프로퍼티 변경 가능
delete person.age; // 동적으로 삭제 가능

3️⃣ Java 프로퍼티

class Person {
    private String name; // 프로퍼티 (멤버 변수)

    public String getName() { // Getter
        return name;
    }

    public void setName(String name) { // Setter
        this.name = name;
    }
}

public class Main {
    public static void main(String[] args) {
        Person person = new Person();
        person.setName("Alice");
        System.out.println(person.getName()); // "Alice"
    }
}

🎯 결론

  • HTML 프로퍼티 → DOM 요소의 속성과 연결됨 (element.property 형태)
  • JavaScript 프로퍼티 → 객체의 속성(Key-Value)로 동적 추가/삭제 가능
  • Java 프로퍼티 → 클래스의 멤버 변수이며, getter/setter를 통해 접근 (캡슐화 적용됨)

각 언어에서 “프로퍼티(Property)” 개념이 다르게 적용되지만, 공통적으로 객체나 요소의 속성을 나타내는 개념이라는 점은 비슷함! 🚀

🍎 오늘의 문제 상황

  • 프로퍼티에 대해 여러 언어에서 듣다보니 정확히 어떤 개념인지 혼동되어 너무 헷갈렸다.
    • 비교하며 찾아보니 프로퍼티에 대해 더욱 이해가 되는 것 같다.

🦄 느낀 점

  • 여러 언어를 배우다보니 각 언어별로 개념을 정확히 알고 있어야겠다.