React 2일차(클래스 컴포넌트)

시작하기 전에 폴더명에 @을 붙인 이유가 궁금해서 검색해 봤다.

node_module에서 @폴더명은 무엇인가?

Scope Package(스코프 패키지)이며, NPM(Node Package Manager)에서 패키지를 그룹화하고 관리하기 위한 네임스페이스(namespace, 폴더명이 겹치지 않기 위한 방지) 역할이다.

 

클래스 컴포넌트

자바 스크립트의 클래스를 사용하여 작성한 컴포넌트로 React.Component를 상속받고, render() 메서드를 필수로 구현해야 한다.

클래스 컴포넌트는 상태(state)와 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount 등)가 있다.

import React, { Component } from 'react'

class LifecycleTest extends Component {

    constructor(props) {
        super(props);
        
        this.state = {
            count: 0,
        }

        console.log("constructor : 생성자 호출")
    }
    
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}> 1증가
        </button>
      </div>
    )
  }
}

export default LifecycleTest;

• 클래스 컴포넌트는 생성자 메서드(constructor)를 사용하여 초기 상태(state)를 설정한다.
• super(props)는 부모 클래스인 React.Component의 생성자를 호출하여 props를 상속받는다.
• state는 컴포넌트의 상태를  this.state로 관리한다. 또한 state는 컴포넌트의 데이터를 저장하고 상태가 변경될 때마다 UI가 업데이트가 된다.
• 위 코드에는 없지만, setState() 함수로 상태를 업데이트하는데, 수정의 개념이 아닌 전체 삭제 후 새로운 값을 저장하는 개념이다.
• render()는 JSX를 반환하며, 컴포넌트의 UI를 구성한다. 이 메서드는 항상 필수이며, 상태나 props에 따라 동적으로 UI를 변환한다.

 

클래스 컴포넌트 특징

• 클래스 컴포넌트에서는 this.state로 상태를 정의하고 this.setState()로 상태를 업데이트하여, 상태 관리(State Management)한다.
• 생명주기 메서드는 컴포넌트가 마운트 된 후( componentDidMount ), 컴포넌트가 업데이트가 된 후( componentDidUpdate ), 컴포넌트가 언마운트 된 후( componentWillUnmount ) 등이 존재한다.
• class 문법을 사용하고 JSX를 변환하여 UI를 구성하는 render() 메서드를 필수적으로 구현해야 한다.

 

이렇게 3가지의 특징으로 컴포넌트의 다양한 상태를 관리할 수 있어, 복잡한 로직을 처리하는데 유리하다.

 

생명주기 메서드(Life Cycle Methods)

컴포넌트가 생성되고, 업데이트되며, 제거되는 과정에서 발생하는 다양한 단계에 대해 정의된 메서드이다.

 

생명주기 단계는 3단계로 나눌 수 있다.

• 마운팅(Mounting): 컴포넌트가 처음 DOM에 추가될 때
• 업데이트(Updating): 컴포넌트의 상태나 속성이 변경될 때
• 언마운팅(Unmounting): 컴포넌트가 DOM에서 제거될 때

 

마운팅(Mounting) 단계

constructor(props) {
    super(props);

    this.state = {
        count: 0,
    };
}

생성자(constructor)로 컴포넌트가 생성될 때 호출된다.

componentDidUpdate(prevProps) {
  if (prevProps.value !== this.props.value) {
    this.setState({ value: this.props.value });
  }
}

componentDidUpdate() 메서드를 통해 초기 상태를 설정하거나 props를 기반으로 상태를 설정하는 데 사용된다.

 

업데이트(Updating) 단계

componentDidUpdate(prevProps, prevState){
    console.log("componentDidUpdate : 컴포넌트 업데이트 완료")
    console.log("prevProps(이전 props) : ", prevProps)
    console.log("prevState(이전 state) : ", prevState)
}

state(상태)나 props(속성)이 변경될 때 componentDidUpdate() 메서드를 호출할 수 있다.

DOM에 대한 직접적인 조작이나, 새로운 데이터 요청을 처리하는데 유용하다.

 

언마운팅(Unmounting)

componentWillUnmount() {
    console.log("componentWillUnmount : 컴포넌트 제거 완료")

}

컴포넌트가 DOM에서 제거되기 직전에 호출된다. 

이벤트 리스너를 제거하거나 타이머를 클리어하는 등의 정리 작업을 할 수 있다.

 

에러 처리(Error Handling)

componentDidCatch(error, info) {}

부모 컴포넌트에서 자식 컴포넌트의 에러를 처리할 수 있는 메서드이다.

에러를 로깅하거나 에러를 사용자에게 알리는 등의 작업을 할 수 있다.

 

클래스 컴포넌트를 사용하지 않은 이유

1. React Hooks는 함수형 컴포넌트에서도 상태 관리(useState)와 생명주기 기능(useEffect)을 사용할 수 있다.
2. this로 가독성이 떨어진다.
3. 클래스 컴포넌트는 함수형 컴포넌트에 비해 무겁기 때문에 React의 리렌더링 작업을 더 잘 처리하지 못한다.
4. React Hooks API를 통해 클래스 컴포넌트보다 더 직관적이고 사용하기 쉽다.