[React] 💎 Class 문법을 이용한 Components 사용법.

목차

클래스형 컴포넌트는 무엇인가?

클래스형 컴포넌트는 함수형 컴포넌트와 React Hook이 등장하기 이전에 사용하던 컴포넌트 형태로 ES6(ECMA Script 2015)부터 추가된 JavaScript Class를 바탕으로 컴포넌트를 작성한다.

---

함수형 컴포넌트

• 성능이나 메모리 사용에 있어 약간의 이점이 있음
• Hook을 통해 state, lifeCycle을 구현함
• 클래스형 컴포넌트에 비해 표현이 간결함

 

클래스형 컴포넌트

• ES6(ECMA Script 2015)부터 추가된 Class를 통해 컴포넌트 선언
• 함수형 컴포넌트와 Hook이 등장하기 전에 폭넓게 사용되었기 때문에, 레거시 코드에서 자주 발견할 수 있는 형태
• 표현방법이 좀 더 명시적이고, 함수형 컴포넌트 보다 약간 기능이 더 많음

---

클래스형 컴포넌트 생명주기

 

마운트 단계 (Mounting)

컴포넌트 객체가 최초로 생성되어 DOM에 삽입될 때 한 번 실행된다.

 

 

업데이트 단계 (Updating)

props, state가 변경될 때 마다 수행되며 변경사항을 화면에 표시한다.

 

 

소멸 단계 (Unmounting)

컴포넌트가 DOM상에서 제거될 때 한 번 호출된다.

 

 

오류 처리

위 생명주기에 나타나지 않았지만 오류가 발생하면 아래 메서드가 순차적으로 호출됨

• static getDerivedStateFromError()
• componentDidCatch()

---

실제 사용 예제

TypeScript

class Modal2 extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      name : 'kim',
      age : 20
    }
  }

  render(){
    return (
      <div>
          <div>안녕 { this.state.age }
            <button onClick={()=>{ this.setState({age : 21}) }}>버튼</button>
          </div>
          <div>안녕 { this.props.프롭스이름 }</div>
      </div>
    )
  }

}

class는 변수, 함수를 보관하는 박스와 같습니다. extends는 기존 class안에 있던 변수나 함수를 복사해주는 문법이다. 

 

React.Component라는 class안에 있던 변수와 함수들을 복사해야 컴포넌트라고 인정해주기 때문에 class 어쩌구 extends React.Component라고 쓰는 것이다.

 

state를 변경하고 싶으면 this.setState라는 기본함수를 가져다가 사용하면 된다. 소괄호안에 새로운 state 넣으면 그 값으로 기존 state를 업데이트한다. 완전히 값을 바꾸는 것이 아니라 차이점만 비교해서 잘 변경해준다.

 

만약, 부모가 보낸 props를 출력하고 싶다면.

1. constructor, super에 props 파라미터를 등록하고.
2. this.props 쓰면 props가 나온다. 

---

클래스형 컴포넌트의 한계

클래스형 컴포넌트가 명시적이고 기능이 더 많음에도 불구하고 함수형 컴포넌트로 대체된 데에는 몇가지 이유가 있습니다.

1. 의례적으로 작성해야하는 코드량이 많음. 클래스형 컴포넌트는 React Component를 상속해야하며 라이프사이클 메서드를 정의해야하며 준수해야하는 규칙이 상대적으로 더 많습니다. 아래는 함수형 컴포넌트와 클래스형 컴포넌트의 차이를 보여줍니다.
2. 성능상 불리함. 컴파일러가 코드 압축과 최적화를 진행하기에 약간 더 어려운 어려운 구조이며 , 메모리 사용량도 좀 더 높습니다.
3. 공통로직 관리가 어려움. 클래스형 컴포넌트에서는 공통로직을 관리하기 위해 Higher Order Component 패턴이나 Render Props 패턴을 주로 사용하며, 이러한 패턴들은 대체로 복잡성이 높습니다. 함수형 컴포넌트는 그 자체가 함수이기 때문에 공통로직 관리가 간편합니다.

---

참고 문헌

• 1[React] 클래스형 컴포넌트
• 224. 클래스형 컴포넌트
• 3class를 이용한 옛날 React 문법