클래스

📌 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까요?

• 선언 방식

  • 함수형 컴포넌트

  import React from 'react';
  import './App.css';
  
  function App() {
    const name = 'react';
    return <div className = "react">{name}</div>
  }
  
  export default App;

  • 클래스형 컴포넌트
    • class 키워드가 필수로 들어감
    • Component로 상속을 받아야한다.
    • render() 메소드가 반드시 있어야한다.

  import React, {Component} from 'react';
  
  class App extends Component {
    render() {
      const name = 'react';
      return <div className="react">{name}</div>
    }
  }
  
  export default App;

• 일반적 차이

  • 클래스형 컴포넌트
    • state, lifeCycle 관련 기능사용이 가능하다.
  • 함수형 컴포넌트
    • state, lifeCycle 관련 기능사용이 불가능하다, [대신 Hook을 통해 해결]

• State 값 사용시 차이점

  • 클래스형 컴포넌트
    • constructor 안에서 this.state 초기값 설정 가능
    • constructor 없이 바로 state 초기값을 설정할 수 있다.
  • 함수형 컴포넌트
    • 함수형 컴포넌트에서는 useState 함수로 state를 사용한다.

• props의 사용 차이

  • 클래스형 컴포넌트
    • this.props로 값을 불러올 수 있다.
  • 함수형 컴포넌트
    • props를 불러욜 필요 없이 바로 호출할 수 있다.

• LifeCycle

  • 클래스형 컴포넌트
    • componentDidMount: 컴포넌트가 처음 렌더링된 후에 실행되며 초기화 작업에 사용됨.
    • componentDidUpdate: 컴포넌트 업데이트 후에 실행되며 데이터 업데이트 및 UI 갱신에 사용됨.
    • componentWillUnmount: 컴포넌트가 언마운트되기 직전에 실행되며 정리 작업에 사용됨.
  • 함수형 컴포넌트
    • useEffect 훅을 사용하여 라이프사이클과 관련된 작업을 수행.
    • 비동기적으로 동작하며, 종속성 배열에 지정된 props나 state 변경 시 작업을 다시 실행.
    • 반환된 함수로 컴포넌트 언마운트 시 정리 작업 수행 가능.

📌 클래스에서 호이스팅이 발생하나요? 이유는 무엇인가요?

• 클래스는 클래스 정의 이전에 참조할 수 없다.
• 마치 호이스팅이 발생하지 않는 것처럼 보이나 그렇지 않다.

const Person = " ";

{
  // 호이스팅이 발생하지 않는다면 " "이 출력되어야 한다.
  console.log(Person); // ReferenceError
  
  class Person {};
}

• 클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다.
• 단, 클래스는 let const 키워드로 선언한 변수처럼 호이스팅된다.
• 따라서 클래스 선언문 이전에 TDZ(Temporal Dead Zone, 변수나 클래스가 선언되었지만 아직 초기화되지 않은 상태)에 빠진다.

📌 클래스의 생성자(constructor)는 어떤 역할을 하나요?

• constructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다.
  이름을 변경할 수 없다.

• constructor는 메서드로 해석되는 것이 아니라 클래스가 평가되어 생성한 함수 객체 코드의 일부가 된다. 다시 말해, 클래스 정의가 평가되면 constructor의 기술된 동작을 하는 함수 객체가 생성된다.

• constructor는 클래스 내에 최대 한 개만 존재할 수 있다.

• constructor는 생략할 수 있다. 생략하면 빈 constructor가 암묵적으로 정의된다.

• 인스턴스를 초기화하려면 constructor를 생략해서는 안된다.

• constructor는 별도의 반환문을 갖지 않아야 한다. 암묵적으로 this, 즉 인스턴스를 반환하기 때문이다.

📌 super 키워드에 대해 설명해주세요.

• super 키워드는 함수처럼 호출할 수도 있고 식별자처럼 참조할 수 있는 특수한 키워드다.

• super를 호출하면 수퍼클래스의 constructor를 호출한다.

• super를 참조하면 수퍼클래스의 메서드를 호출할 수 있다.

📌 정적 메서드와 프로토타입 메서드의 차이점을 설명해 주세요.

• 정적 메서드와 프로토타입 메서드는 속해 있는 프로토타입 체인이 다르다.
• 정적 메서드는 클래스로 호출하고, 프로토타입 메서드는 인스턴스로 호출한다.
• 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다. (this 바인딩이 다르다)