[react] 생명주기 메서드를 사용하여 컴포넌트의 크기를 조절하는 방법은 무엇인가요?

22 Dec 2023

react

예를 들어, DOM 요소의 크기에 따라 컴포넌트의 레이아웃을 조절해야 하는 경우, componentDidMount에서 요소의 크기를 확인하고 상태나 속성을 업데이트하여 레이아웃을 조정할 수 있습니다.

아래는 간단한 예제 코드입니다.

import React, { Component } from 'react';

class ResizableComponent extends Component {
  state = {
    width: 0,
    height: 0,
  };

  componentDidMount() {
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.updateDimensions);
  }

  updateDimensions = () => {
    const width = this.container.offsetWidth;
    const height = this.container.offsetHeight;
    this.setState({ width, height });
  };

  render() {
    return (
      <div ref={el => (this.container = el)}>
        {`Width: ${this.state.width}, Height: ${this.state.height}`}
      </div>
    );
  }
}

export default ResizableComponent;

이 예제에서는 componentDidMount에서 초기 창 크기를 가져오고, 창 크기가 변경될 때마다 updateDimensions 메서드를 호출하여 상태를 업데이트합니다. 그 결과, 컴포넌트의 크기가 동적으로 조절됩니다.

더 복잡한 레이아웃 및 크기 조정 시나리오에는 ResizeObserver API 또는 외부 라이브러리를 사용할 수도 있습니다.