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

• 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가 더 적합한 선택입니다.