[react] 생명주기 메서드를 이용하여 반응형 디자인을 적용하는 방법은 무엇인가요?

22 Dec 2023

react

componentDidMount() 메서드는 컴포넌트가 DOM에 마운트된 후에 호출됩니다. 이 메서드를 사용하여 초기화 작업을 수행하고, 화면 크기나 기기 방향 변경과 같은 이벤트에 대한 이벤트 리스너를 등록할 수 있습니다. 이를 통해 반응형 디자인을 구현할 수 있습니다.

예시:

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

componentDidUpdate() 메서드

componentDidUpdate() 메서드는 컴포넌트의 업데이트가 일어난 후에 호출됩니다. 이 메서드를 사용하여 화면 크기나 기기 방향 변경과 같은 변화를 감지하고, 상응하는 액션을 수행할 수 있습니다.

예시:

componentDidUpdate(prevProps, prevState) {
  if (prevProps.someValue !== this.props.someValue) {
    // 반응형 디자인에 맞게 동작 수행
  }
}

componentWillUnmount() 메서드

componentWillUnmount() 메서드는 컴포넌트가 언마운트되기 전에 호출됩니다. 이 메서드를 사용하여 이벤트 리스너의 해제 등 정리 작업을 수행할 수 있습니다.

예시:

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

이러한 생명주기 메서드를 이용하여, 화면 크기나 기기 방향 등의 변화에 대응하여 반응형 디자인을 구현할 수 있습니다.

참고 문헌:

React 공식 문서: React 생명주기 메서드
MDN 웹 문서: window.addEventListener()
MDN 웹 문서: window.removeEventListener()

위의 내용은 React에서 생명주기 메서드를 사용하여 반응형 디자인을 적용하는 방법에 대한 간략한 안내입니다. 도움이 되셨기를 바랍니다.

TOC

componentDidMount() 메서드

componentDidUpdate() 메서드

componentWillUnmount() 메서드