useMemo와 useState 이해하기, 성능 최적화와 상태 관리

KUKJIN LEE • 7개월 전 작성

useState는 Component 내부에서 변수의 상태를 관리하기 위해 사용, 사용자 입력, 버튼 클릭 상태 또는 다른 데이터 변화를 추적하고 반응하기 위해 활용됩니다. 사용자가 입력한 텍스트를 저장하고 표시하는 입력 필드에서 사용
useMemo는 연산 결과값을 메모리에 저장하여 함수의 결과값을 재사용! 성능을 최적화합니다. 복잡한 계산이나 무거운 작업 결과를 캐싱하여 Component 리렌더링 시 동일한 계산을 반복하지 않도록 사용됩니다. 사용자 목록을 정렬하는 작업의 결과를 저장

useMemo

useMemo 는 복잡한 계산이나 데이터 처리를 한 번 수행한 후, 결과를 메모하여 동일한 계산을 다시 해야 할 때 저장된 결과를 사용하는 방식으로 작동합니다. 작업량을 줄여 성능을 개선합니다. 비유하자면, 공부한 내용을 메모해 두고, 같은 주제를 볼 때 다시 공부하는게 아니라 메모를 본다 생각하면 됩니다.

useEffect와의 차이점

useEffect는 Component가 렌더링 된 후 부수 효과를 수행하기 위해 사용됩니다. 데이터 fetching, 구독 설정 또는 DOM 변경과 같은 작업에 사용됩니다. 예를 들어, 검색 기능 구현 시 사용자 입력에 따라 비동기적으로 데이터를 가져오는 로직을 실행해야 한다면 useEffect가 적절합니다.

요약

useMemo 는 계산 비용이 높은 연산 결과를 캐싱하여 성능을 최적화하는 데 사용됩니다. Component 내에서 직접 계산할 수 있는, 입력 값이 변경될 때만 결과가 달라지는 연산에 적합합니다.
useEffect 는 데이터를 외부에서 가져오는 비동기 작업 처리에 적합합니다. 사용자의 입력이나 외부 데이터 변화에 반응하여 데이터를 가져오고 상태를 업데이트할 때 사용됩니다.
useState와 useMemo는 상태 관리와 성능 최적화, useEffect는 부수 효과를 처리하기 위한 역할입니다.

useState 예시

import React, { useState } from 'react';

function TextInput() {
  const [text, setText] = useState(''); // 초기 상태는 빈 문자열

  const handleChange = (event) => {
    setText(event.target.value); // 사용자 입력에 따라 text 상태를 업데이트
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>입력한 텍스트: {text}</p>
    </div>
  );
}

useMemo 예시

useMemo를 사용하여 사용자 목록을 필터링하는 예시입니다. 이 경우, 검색 쿼리에 따라 필터링된 사용자 목록을 메모리에 저장하여, 동일한 검색 쿼리로 컴포넌트가 리렌더링될 때마다 필터링 연산을 반복하지 않도록 합니다.

import React, { useState, useMemo } from 'react';

function UserList({ users }) {
  const [searchQuery, setSearchQuery] = useState('');

  const filteredUsers = useMemo(() => {
    return users.filter(user =>
      user.name.toLowerCase().includes(searchQuery.toLowerCase())
    );
  }, [users, searchQuery]); // users 배열이나 searchQuery가 바뀔 때만 재계산

  const handleChange = (event) => {
    setSearchQuery(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={searchQuery}
        onChange={handleChange}
        placeholder="사용자 검색..."
      />
      <ul>
        {filteredUsers.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

사용자가 입력 필드에 검색 쿼리를 입력할 때마다 handleChange 함수가 호출되어 searchQuery 상태가 업데이트됩니다. 이때 useMemo를 사용하여 filteredUsers를 계산합니다. useMemo의 의존성 배열에 users와 searchQuery를 지정했기 때문에, 이 값들이 변경될 때만 filteredUsers를 재계산합니다. 만약 이 값들이 변경되지 않았다면, useMemo는 이전에 메모해둔 결과를 재사용하여 불필요한 재계산을 방지합니다. 이로 인해 애플리케이션의 성능이 향상됩니다.

useEffect를 사용한 검색 기능 예시

import React, { useState, useEffect } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  useEffect(() => {
    const fetchResults = async () => {
      if (query !== '') {
        // API 호출을 가정한 예시
        const response = await fetch(`https://kakao.gg/search?query=${query}`);
        const data = await response.json();
        setResults(data);
      } else {
        setResults([]);
      }
    };

    fetchResults();
  }, [query]); // query가 변경될 때마다 useEffect 내부의 코드 실행

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="검색..."
      />
      <ul>
        {results.map((result, index) => (
          <li key={index}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
}

사용자의 입력 값(query)이 변경될 때마다 useEffect가 실행되어 검색 결과를 가져오는 함수(fetchResults)를 호출합니다. 이렇게 useEffect를 사용하면, 사용자의 입력에 따라 동적으로 반응하는 비동기 작업을 쉽게 처리할 수 있습니다.

검색 기능 구현 시, 사용자의 입력에 따라 데이터를 가져오는 로직을 실행해야 한다면 useEffect가 더 적합한 선택입니다.

New Tech Posts

추천 도서