[react] JSX에서 라이프사이클, useMemo 사용하기

26 Dec 2023

react

React 애플리케이션을 개발하면서 JSX(JavaScript XML)를 사용하는 동안 라이프사이클에 대한 이해와 useMemo 훅을 활용하는 것이 중요합니다. 이러한 개념들을 잘 이해하고 활용하면 애플리케이션의 퍼포먼스를 최적화할 수 있습니다.

라이프사이클(Lifecycle) 이해하기

React 컴포넌트에는 다양한 라이프사이클 메서드가 있습니다. 이를 이용하여 컴포넌트의 생성, 렌더링, 업데이트, 파괴 등의 작업을 관리할 수 있습니다. 라이프사이클 메서드는 컴포넌트가 특정 시점에 어떤 작업을 수행해야 하는지를 정의합니다. 예를 들어, componentDidMount, componentDidUpdate, componentWillUnmount 등이 있습니다.

이제, 라이프사이클 메서드를 사용하여 컴포넌트가 마운트되거나 업데이트될 때 추가 작업을 수행하는 방법을 알아봅시다.

라이프사이클 메서드 활용하기

import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 컴포넌트가 마운트된 후에 실행할 작업을 정의합니다.
  }

  componentDidUpdate() {
    // 컴포넌트가 업데이트된 후에 실행할 작업을 정의합니다.
  }

  componentWillUnmount() {
    // 컴포넌트가 파괴되기 전에 실행할 작업을 정의합니다.
  }

  render() {
    // 컴포넌트의 렌더링을 정의합니다.
  }
}

useMemo 훅 활용하기

useMemo 훅은 메모이제이션된 값을 반환합니다. 이를 통해 이전에 계산된 값을 재사용할 수 있으며, 성능을 향상시킬 수 있습니다. 특히 렌더링 성능을 최적화할 때 유용하게 사용됩니다.

useMemo 훅 사용 예시

import React, { useMemo } from 'react';

function MyComponent({ list }) {
  const total = useMemo(() => {
    return list.reduce((acc, val) => acc + val, 0);
  }, [list]);

  return <div>Total: {total}</div>;
}

위 예시에서 useMemo 훅은 list 배열의 변화가 있을 때만 total 값을 다시 계산하도록 합니다.

이와 같이 라이프사이클 메서드와 useMemo 훅을 적절하게 활용하여 React 애플리케이션을 최적화할 수 있습니다.

이상으로 React JSX에서 라이프사이클 및 useMemo 훅의 활용에 대해 알아보았습니다. React 애플리케이션을 개발하면서 성능을 향상시키고 사용자 경험을 향상시키기 위해 이러한 개념들을 적극적으로 활용해보시기를 권장드립니다.

더 많은 정보를 원하시면 아래 React 공식 문서를 확인해보세요.

React 공식 문서: https://ko.reactjs.org/docs/react-component.html