본문 요약 🌱
리액트에서 클래스가 중요한 이유 -> "함수형 컴포넌트 이전까진 모든 컴포넌트가 클래스로 작성되어 있었기 때문!"
클래스란 무엇인가요?🤔
=> 특정한 형태의 객체를 반복적으로 만들기 위해 사용되는 것이 바로 클래스입니다. 쿠키를 찍어내는 쿠키틀 같은 것으로 이해하면 편해요! 🍪🍪🍪
클래스의 구성 요소는?
- constructor : 객체를 생성하는 데 사용하는 특수한 메서드 (
쿠키 반죽입니다) - 메서드 (인스턴스 메서드) : 인스턴스와 연결해서 사용할 수 있는 함수 (
쿠키 토핑 레시피입니다) - 정적 메서드 : 클래스로만 호출이 가능한 함수 (
쿠키틀로 뭔가를 하는 것입니다) - setter : 클래스 필드에 값을 할당할 수 있도록 함
- getter : setter로 할당한 값을 읽어올 수 있도록 함
인스턴스 메서드 (feat. prototype)🖍️
여기서 중요한 건 메서드 자체보다 prototype! JS는 프로토타입 기반 언어예요.
"인스턴스 메서드는 자바스크립트의 prototype에 선언되므로 프로토타입 메서드로 불리기도 한다."
prototype을 설명하자면...❤️🔥
=> 클래스로 인스턴스를 생성하면, 클래스 내부에 있는 메서드도 사용이 가능합니다. 인스턴스 메서드는 prototype에 선언되기 때문이에요. prototype은 박스로 이해하면 쉬워요. 그것도 그냥은 보이지 않는 그림자 박스예요. ⬛️
모든 객체는 각자의 prototype 객체를 가지고 있어요. 객체에서 어떤 메서드를 호출했을 때, 일단 그 객체의 그림자 박스(prototype)를 먼저 뒤져보아요. 음.. 없네요. 그럼 어떻게 하냐면 그 객체의 부모의 그림자 박스(prototype)를 뒤져서 메서드를 찾아요!
클래스로 만들어진 인스턴스는 부모 자식 관계를 가지기 때문에, 인스턴스는 클래스에서 정의된 인스턴스 메서드를 쓸 수 있는 거예요. 이를 프로토타입 체이닝 이라고 부릅니다. 😎
클래스의 핵심 개념 -> 상속
클래스에서 상속을 빼면 JS를 객체 지향 언어로 만들고자 했던 개발자들의 열정을 외면하는 일이에요.🥲 extends를 사용해서 기존 클래스를 상속 받는 새로운 클래스를 만들 수 있습니다.
하지만 바벨을 통해 코드를 트랜스파일해보면 클래스 코드도 내부적으로는 기존부터 사용되던 프로토타입 방식을 사용하는 것임을 확인할 수 있습니다.
그래서 클래스를 일종의 문법적 설탕(syntactic sugar)이라고 칭하기도 합니다.🍭🍬🍭🍬
