React - 클래스와 상속

클래스

정의

• 다른 객체 지향 언어에서의 클래스와 비슷하게 객체를 생성하기 위한 템플릿

특징

• 필드, 생성, 클래스 메서드가 포함 될 수 있음

사용 방법

• class 키워드를 이용해 선언함
• 생성자가 필요할 경우, constructor 키워드를 이용하여 구현 가능함
• 예시 코드

//생성자가 필요없을 경우
class Person{

}

//생성자가 필요할 경우
class Person{
    constructor(){
        
    }
}

상속

정의

• 어떤 객체의 프로퍼티나 메소드를 다른 객체가 상속받아 사용하는 것

사용 방법

• extends 키워드 사용

  • 'class 자식 클래스 명 extends 부모 클래스 명'의 형태로 사용함
  • 주의
    • 상속받은 클래스에서는 생성자에서 super키워드를 이용하여 상위 클래스의 생성자를 호출해야함
    • super 키워드로 호출하지않을 경우, 오류가 발생함

• 예시 코드

  class Person{
      constructor(firstName, lastName, age){
          this.firstName = firstName;
          this.lastName = lastName;
          this.age = age;
      }
  }
  
  
  class Child extends Person{
        constructor(firstName, lastName, age, hobby, favorite){
          super(firstName, lastName, age);
      }
  }

참고한 자료

실전! 스프링 부트와 리액트로 시작하는 모던 웹 애플리케이션 개발.