1. 프로토타입이란?
“프로토타입은 자바스크립트에서 객체가 다른 객체로부터 속성과 메서드를 상속받는 방식을 설명하는 개념”
모든 자바스크립트 객체는 다른 객체로부터 상속을 받으며, 이 상속을 관리하는 시스템이 바로 "프로토타입 체인"입니다.
- 프로토타입 체인: 객체가 프로퍼티를 찾을 때 자신의 속성에서 먼저 찾고, 없으면 프로토타입 체인을 따라 상위 객체에서 찾습니다.
- Object.prototype: 모든 객체의 최상위 프로토타입은 Object.prototype입니다. 이 객체의 프로퍼티나 메서드는 자바스크립트의 거의 모든 객체에서 사용할 수 있습니다.
2. 프로토타입의 역할과 특징
- 상속을 통한 코드 재사용: 자바스크립트에서 클래스 기반 상속 대신 프로토타입을 사용하여 객체지향 프로그래밍을 구현합니다. 이를 통해 객체 간에 메서드와 속성을 공유하고 재사용할 수 있습니다.
- 메모리 효율성: 메서드를 프로토타입에 정의하면 모든 인스턴스가 해당 메서드를 공유합니다. 이 방식은 각 객체가 개별 메서드를 가지고 있는 것보다 메모리를 절약할 수 있습니다.
- 동적 속성 추가: 프로토타입은 객체 생성 후에도 동적으로 속성이나 메서드를 추가할 수 있습니다.
3. 리액트와 프로토타입
리액트 자체는 클래스형 컴포넌트와 함수형 컴포넌트에서 모두 프로토타입을 활용합니다. 클래스형 컴포넌트는 프로토타입을 통해 리액트의 Component 클래스로부터 메서드와 속성을 상속받습니다.
클래스형 컴포넌트의 예시:
import React, { Component } from 'react';
class MyComponent extends Component {
render() {
return <h1>Hello, World!</h1>;
}
}위 예제에서 MyComponent는 React.Component를 상속받아 사용합니다. Component 클래스의 메서드와 속성들은 MyComponent의 프로토타입 체인에 존재하며, 이를 통해 render 메서드와 같은 기능을 사용할 수 있습니다.
프로토타입 체인을 이용한 상속:
function Person(name) {
this.name = name;
}
Person.prototype.greet = function () {
console.log(`Hello, my name is ${this.name}`);
};
const john = new Person('John');
john.greet(); // "Hello, my name is John"위 코드에서 greet 메서드는 Person의 프로토타입에 정의되어 있기 때문에 john 인스턴스에서도 사용할 수 있습니다.
4. 프로토타입이 리액트에서 덜 사용되는 이유
리액트는 최신 버전에서 클래스형 컴포넌트보다 함수형 컴포넌트와 Hooks를 선호합니다. 함수형 컴포넌트는 함수 기반이므로 직접적인 프로토타입 상속 개념이 사용되지 않지만, 자바스크립트의 기본 동작으로 여전히 프로토타입 체인이 작동합니다.
5. 프로토타입과 함수형 컴포넌트
함수형 컴포넌트는 React.Component를 상속받지 않고, 단순히 함수로서의 역할을 합니다. 따라서 프로토타입 체인보다는 클로저와 같은 자바스크립트의 다른 메커니즘에 의존합니다.