Javascript는 본질적으로 객체 기반 언어입니다.

OOP(Object-Oriented Programming)의 핵심은 다음 네 가지입니다

1. 추상화 (Abstraction)
2. 캡슐화 (Encapsulation)
3. 상속 (Inheritance)
4. 다형성 (Polymorphism)

1️⃣ 추상화 (Abstraction)

불필요한 세부 정보를 숨기고, 중요한 부분만 노출하는 것

예시:

class CoffeeMachine {
  constructor(brand) {
    this.brand = brand;
  }

  makeEspresso() {
    this.#boilWater();
    console.log(`${this.brand} 머신: 에스프레소 완성!`);
  }

  #boilWater() {
    console.log('물을 끓이는 중...');
  }
}

const cm = new CoffeeMachine('Nespresso');
cm.makeEspresso(); // 에스프레소 완성!

• 내부 동작(boilWater())은 숨겨짐
• 사용자 입장에선 단순히 makeEspresso()만 알면 됨

2️⃣ 캡슐화 (Encapsulation)

객체 내부 상태를 숨기고, 필요한 인터페이스만 공개하는 것

✅ 예시 (Private 필드):

class BankAccount {
  #balance = 0;

  deposit(amount) {
    if (amount > 0) this.#balance += amount;
  }

  getBalance() {
    return this.#balance;
  }
}

const myAccount = new BankAccount();
myAccount.deposit(1000);
console.log(myAccount.getBalance()); // 1000
// myAccount.#balance → ❌ 에러

• #balance는 외부에서 직접 접근 불가 (캡슐화)

3️⃣ 상속 (Inheritance)

기존 클래스의 속성과 메서드를 자식 클래스가 물려받는 것

✅ 예시:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

const dog = new Dog('Buddy');
dog.speak(); // Buddy barks

• Dog는 Animal의 속성 및 메서드를 상속받고, speak()는 오버라이딩

4️⃣ 다형성 (Polymorphism)

같은 메서드명이 상황에 따라 다르게 동작하는 것

✅ 예시 (오버라이딩):

const animals = [
  new Dog('Max'),
  new Animal('Generic')
];

animals.forEach(animal => animal.speak());

결과:

Max barks
Generic makes a sound

• speak()는 각 클래스에 따라 다르게 구현됨
• 하나의 animal.speak() 호출이 여러 형태로 동작 → 다형성

🔷 React 컴포넌트와 OOP 개념

React는 함수형 컴포넌트 기반이지만, OOP의 사고방식은 다음과 같이 그대로 적용됩니다.

OOP 특성 React에서의 예

const Button = ({ type }) => {
  return <button>{type === 'submit' ? '제출' : '취소'}</button>;
};

• 같은 <Button /> 컴포넌트도 props에 따라 다르게 동작 → 다형성 개념 적용

결론

특성 설명 JS 예시 키워드