클래스형 컴포넌트

현재는 비교적 함수형 컴포넌트가 많이 사용되지만서도 아직까지 클래스형 컴포넌트 형태를 사용하거나 기존 만들어진 클래스형 컴포넌트 형태를 유지하는 곳도 많다

 

클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의되며, 생명주기 메소드를 사용할 수 있으며 내부 상태를 가질 수 있어 데이터 변경에 따른 렌더링을 감지 및 관리할 수 있다

 

클래스형 컴포넌트의 구조

 

1. 클래스를 선언하고 만들고 싶은 컴포넌트를 extends한다.(React.Component 또는 React.PureComponenet)

import React from 'react'
class Samplecomponent extends React.Component {
	render() {
		return <h2>Sample Component</h2>
        }
}

 

2. props, state의 타입, 메소드를 선언한 후 넣어줌

constructor에서 props를 넘겨주고 state의 기본값을 설정함(초기화)

render 내부에서 쓰일 함수와 컴포넌트가 렌더링할 내용을 정의 함.

• props : 컴포넌트에 특정속성을 전달하는데 사용
• state : 클래스형 컴포넌트 내부에서 관리하는 값을 의미 (항상 객체여야 함)
• 메서드 : 렌더링 함수 내부에서 사용되는 함수 3가지 방식으로 제작 가능
  • constructor에서 this 바인드 : 함수로 메서드를 만드는 경우 this가 undefined가 됨
  • 화살표 함수 사용 : 작성 시점에 this가 상위 스코프로 결정 됨
  • 렌더링 함수 내부에서 새롭게 만들어 전송 : 매 렌더링 마다 발생

 

 

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

 

실행 시점 3가지

1. 마운트 : 컴포넌트 생성 시점
2. 업데이트 : 컴포넌트의 내용이 변경되는 시점
3. 언마운트 : 컴포넌트가 더 이상 존재하지 않는 시점 </aside>

 

생명주기 메서드

1. render() : 컴포넌트가 UI를 렌더링하기 위해 사용 됨.
   1. 순수해야하며 부수효과가 없어야 함 : 같은 입력 값엔 항상 같은 결과물 반환
   2. 마운트와 업데이트 과정에서 발생
2. componentDidMount() : 마운트 후 즉시 호출, state 변경이 가능하며 렌더링을 유발한다.
   1. 생성자 함수에서는 할 수 없는 API 호출 후 업데이트, DOM에 의존적인 작업에서 사용
3. componentDidupdate() : 컴포넌트 업데이트 직후 바로 실행 됨.
   1. state, props의 변화에 따라 DOM을 업데이트하는 등에 쓰임
   2. 마찬가지로 this.state로 state 변경 가능
4. componentWilUnmouunt() : 컴포넌트가 더 이상 사용되지 않기 직전에 호출됨
   1. 메모리 누수, 불필요한 작동 막기위한 클린업 함수 호출을 위한 최적의 위치
5. shouldComponentUpdate() : state,props 변경으로인한 리렌더링을 막기위해 사용
   1. 컴포넌트에 영향 받지않는 변화에 대해 정의가 가능함.
   2. Component와 PureComponent는 얕은비교를 사용해 결과가 다를 때만 렌더링을 수행하는 반면, Component의 경우 state가 업데이트 되는대로 렌더링이 발생함.
6. getSnapShotBeforellpdate() : DOM이 업데이트되기 직전에 호출되며, 반환 값은 componentDidUpdate로 전달 됨. 렌더링 전 윈도우 크기, 스크롤 위치 조정등의 작업에 용이

 

 

클래스형 컴포넌트의 한계

1. 데이터의 흐름을 추적하기 어려움 : 작성 시 순서가 강제되어 있지 않기에 조회시 어려움이 있음
2. 어플리케이션 내부 로직의 재사용의 어려움 : 공통로직이 많아 질수록 이를 감싸는 고차 컴포넌트, props가 많아지고 상속으로 구현 시 클래스 흐름을 쫓아야 하기에 복잡도가 증가함.
3. 기능이 많아질수록 컴포넌트 크기가 커짐
4. 상대적으로 어려움
5. 코드 최적화의 어려움