[07-React] 3. 클래스 컴포넌트 개념

1. 클래스 컴포넌트

: v16.8 이전까지의 리액트 컴포넌트 구성 방식

- 전체 코드

class Person {
  // 생성자 (Constructor)
  constructor(name, age) {
    this._name = name;  // 내부적으로 사용하는 _name, _age
    this._age = age;
  }

  // Getter: name 속성의 값을 가져올 때 호출
  get name() {
    return this._name;
  }

  // Setter: name 속성의 값을 설정할 때 호출
  set name(newName) {
    if (newName.length > 0) {
      this._name = newName;
    } else {
      console.log("이름은 빈 문자열일 수 없습니다.");
    }
  }

  // Getter: age 속성의 값을 가져올 때 호출
  get age() {
    return this._age;
  }

  // Setter: age 속성의 값을 설정할 때 호출
  set age(newAge) {
    if (newAge >= 0) {
      this._age = newAge;
    } else {
      console.log("나이는 0 이상이어야 합니다.");
    }
  }

  // 메소드: 인사하기
  greet() {
    console.log(`안녕하세요, 제 이름은 ${this._name}이고, 나이는 ${this._age}살입니다.`);
  }

  // 메소드: 나이를 1살 증가시키는 메소드
  haveBirthday() {
    this._age++;
  }
}

// 클래스를 사용하여 객체 생성
const person1 = new Person("김철수", 30);
person1.greet();  // "안녕하세요, 제 이름은 김철수이고, 나이는 30살입니다."

// 게터를 통해 속성 값 접근
console.log(person1.name);  // "김철수"
console.log(person1.age);   // 30

// 세터를 통해 속성 값 수정
person1.name = "이영희";  // 이름 변경
person1.age = 35;         // 나이 변경
person1.greet();  // "안녕하세요, 제 이름은 이영희이고, 나이는 35살입니다."

// 잘못된 값을 세팅할 경우
person1.name = "";  // "이름은 빈 문자열일 수 없습니다."
person1.age = -5;   // "나이는 0 이상이어야 합니다."

1.1 생성자 - constructor

: 객체를 생성하는데 사용하는 특수한 메서드

: 단 하나만 존재 or 별 기능 X시 생략 가능

 

1.2 속성 값 - property

: 클래스로 인스턴스 생성 시, 내부에 정의할 수 있는 속성 값

: 생성자에서 this를 통해 접근(만약 필드에 없는 값에 접근 시, 알아서 생성됨 이때 타입은 public)

 

1.3 getter | setter

: 데이터 캡슐화를 구현하고 속성에 대한 제어를 분리하기 위해 사용됨

: 말 그대로 값을 가져오는 게터와 설정하는 세터로 구성

: 게터의 경우 "get" 키워드를 통해 선언

: 세터의 경우 "set" 키워드를 통해 선언

 

1.4 인스턴스 메서드

: 클래스 내부에서 선언한 메서드

: JS의 prototype에 선언되기 때문에, 프로토 타입 메서드

: 클래스를 통해 객체를 생성 후 사용할 수 있는 메서드

 

1.5 정적 메서드

: 클래스의 인스턴스가 아닌 이름으로 호출 할 수 있는 메서드 -> 인스턴스가 없어도 호출 가능

: "static" 키워드를 통해 클래스 내에서 선언

: 클래스 인스턴스가 아닌 클래스 자신을 가리키는 this를 갖고 있음

: 하나의 생성 및 여러 곳에서 재사용 가능

 

1.6 상속

: 리액트에서 클래스 컴포넌트를 구현하기 위해 사용되는 키워드

extends React.Component
extends React.PureComponent

 

1.7 생명주기

: 클래스 컴포넌트의 경우 많은 코드가 생명주기 메서드에 의존

• 생명주기 메서드의 시점
  1) 마운트(mount) : 컴포넌트의 마운팅(생성) 시점
  2) 업데이터(update) : 컴포넌트의 변경(업데이트) 시점
  3) 언마운트(unmount) : 컴포넌트의 소멸 시점

1.8 한계

1) 데이터 흐름의 추적이 힘듦

2) 내부 코드 재사용이 어려움

3) 복잡도에 따라 코드의 크기가 너무 커짐

1.9 함수 컴포넌트와 비교

 

항목	클래스 컴포넌트	함수형 컴포넌
선언 방법	class 키워드 사용 -> 클래스 기반으로 선언	function 키워드 사용 -> 함수 기반으로 선언
상태 관리	this.state와 this.setState()	useState
생명 주기 메서드	componentDidMount(), componentDidUpdate(), componentWillUnmount() 등 다양한 생명 주기 메서드 제공	생명 주기 메서드 없음.
props 사용법	this.props	함수의 파라미터로 직접 props에 접근
this 바인딩	메서드에서 this 바인딩 필요	this 바인딩 없이 함수 사용 가능
렌더링 메서드 및  컴포넌트 반환값	render() 메서드 안에서 JSX를 반환	함수 본문에서 바로 JSX를 반환

 

---

출처

asac 수업자료

모던 리액트 Deep Dive