신비한 비

React에서 useMemo()는 컴포넌트에서 렌더링할 때 특정 값을 "메모이제이션"하여, 렌더링 성능을 최적화하는 방법 중 하나입니다.

일반적으로, 컴포넌트 내부에서 매번 호출되는 계산량이 큰 함수나 복잡한 연산을 수행하는 함수가 있다면, 매번 렌더링할 때마다 함수가 다시 실행되어 성능에 영향을 줄 수 있습니다.

이때 useMemo()를 사용하면, 함수의 반환값을 메모이제이션하여, 이전에 계산한 결과가 다시 필요할 때는 함수를 재실행하지 않고 이전에 저장된 결과값을 사용할 수 있습니다. 이는 성능 최적화에 도움을 주며, 불필요한 계산을 줄일 수 있습니다.

useMemo()는 다음과 같은 문법으로 사용할 수 있습니다.

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo()는 두 개의 인자를 받습니다. 첫 번째 인자는 메모이제이션할 함수를 입력하고, 두 번째 인자는 의존성 배열(Dependencies array)을 입력합니다.

의존성 배열은 메모이제이션된 값이 사용되는 값들을 배열 형태로 입력합니다. 이 배열에 있는 값들 중 하나라도 변경되면, 메모이제이션된 값이 다시 계산됩니다. 만약 의존성 배열이 빈 배열([])로 입력되면, 메모이제이션된 값은 컴포넌트가 마운트될 때만 계산됩니다.

다음은 예제 코드입니다. getExpensiveNumber() 함수는 매우 무거운 계산을 수행하는 함수이므로, useMemo()를 사용하여 이전에 계산한 결과를 메모이제이션합니다.

import { useMemo, useState } from 'react';

function getExpensiveNumber(num) {
  // 무거운 계산을 수행하는 함수
  let result = 0;
  for (let i = 0; i < num * 10000000; i++) {
    result += Math.random();
  }
  return result;
}

function MyComponent({ a, b }) {
  const [count, setCount] = useState(0);

  const memoizedValue = useMemo(() => {
    return getExpensiveNumber(count);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Memoized Value: {memoizedValue}</p>
    </div>
  );
}

위 예제에서 getExpensiveNumber()함수는 useMemo()를 사용하여 메모이제이션됩니다. 이 함수count값이 변경될 때마다 호출되며, 이전에 계산된 결과가 존재한다면, 메모이제이션된 값을 반환합니다. 만약 이전에 계산된 결과가 없다면, 새로운 값을 계산합니다. 이를 통해, getExpensiveNumber() 함수의 불필요한 계산을 줄여 성능을 최적화할 수 있습니다.

성능향상해주는 보약? 이라고니 많이 먹으면? 여기저기 모든 함수에 hook으로 도배할까?

useMemo()는 성능 최적화를 위해 많이 사용되는 React Hook 중 하나입니다. 하지만, 모든 경우에 사용하기에는 적합하지 않을 수 있습니다. 예를 들어, 메모이제이션된 값이 자주 변경된다면, useMemo()를 사용해도 성능 최적화 효과가 미미할 수 있습니다.

따라서 useMemo()는 주로 렌더링 성능이 중요한 경우에 사용되며, 컴포넌트 내부에서 매번 호출되는 계산량이 큰 함수나 복잡한 연산을 수행하는 함수를 최적화할 때 효과적입니다.

주의사항

또한, useMemo()를 사용할 때는 의존성 배열을 잘 파악하여 사용해야 합니다. 의존성 배열에 필요하지 않은 값이 들어가면, 메모이제이션된 값이 불필요하게 재계산될 수 있습니다. 반면, 의존성 배열에 필요한 값이 빠져있으면, 메모이제이션된 값이 적절하지 않은 값으로 유지될 수 있습니다.

React 18에서는 useMemo()가 변경되지 않았으며, 여전히 위에서 설명한 방식으로 사용됩니다. 하지만, React 18에서는 useMemo()와 같은 Hook들을 더욱 효율적으로 사용할 수 있는 방법들이 추가될 예정이라고 하며, 이를 통해 더욱 성능 최적화를 할 수 있을 것입니다.

내저장소 바로가기 luxury515

React에서 useCallback()은 컴포넌트에서 성능을 최적화하기 위해 사용되는 Hook 중 하나입니다. 이 Hook은 메모이제이션된 함수를 반환하며, 이 함수는 컴포넌트가 렌더링될 때마다 새로 생성되지 않고 이전에 생성된 함수를 재사용합니다. 이를 통해 불필요한 함수 생성 및 연산을 방지하여 성능을 향상시킵니다.

useCallback()은 다음과 같은 구문으로 사용할 수 있습니다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback()은 두 개의 인자를 받습니다. 첫 번째 인자는 메모이제이션된 함수이며, 두 번째 인자는 의존성 배열(dependency array)입니다. 두 번째 인자를 전달하지 않으면 useCallback()은 컴포넌트가 처음 마운트될 때 메모이제이션된 함수를 생성합니다. 의존성 배열에는 메모이제이션된 함수가 의존하는 값들을 나열합니다. 만약 의존성 배열에 있는 값이 변경되면, useCallback()은 새로운 메모이제이션된 함수를 생성합니다. 이 때, 새로 생성된 함수는 이전에 생성된 함수와 다를 수 있습니다.

다음은 useCallback()을 사용하여 의존성 변경을 추적하는 예제입니다.

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

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  const handleChange = useCallback((event) => {
    setText(event.target.value);
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input type="text" value={text} onChange={handleChange} />
    </div>
  );
}

export default App;

위 예제에서 handleChange 함수는 input 요소의 값이 변경될 때마다 호출됩니다. handleChange 함수는 setText 함수에 의존합니다. 그러나 setText 함수는 의존성 배열에 포함되어 있지 않습니다. 이 경우, 의존성 배열이 빈 배열([])로 설정되었으므로, useCallback()이 처음에 생성된 함수를 메모이제이션합니다. 그리고 이 함수는 항상 이전에 생성된 함수와 동일합니다.

하지만, setText 함수가 변경될 때마다 새로운 함수를 생성하려면, 의존성 배열에 setText 함수를 추가해야 합니다. 의존성 배열을 [setText]로 설정하면, setText 함수가 변경될 때마다 새로운 함수가 생성됩니다.

이제 의존성 배열을 [setText]로 설정하여 예제를 다시 실행해보면, input 요소의 값이 변경될 때마다 새로운 함수가 생성되는 것을 확인할 수 있습니다. 이전에는 새로운 함수가 생성되지 않았기 때문에, 불필요한 함수 호출이 발생할 수 있었습니다. 하지만 이제 useCallback()을 사용하여, setText 함수가 변경될 때마다 새로운 함수를 생성하므로, 불필요한 함수 호출을 방지하여 성능을 향상시킬 수 있습니다.

내저장소 바로가기 luxury515

useReducer()는 React Hooks 중 하나로, 상태 관리를 위해 사용되는 함수입니다. 이 함수는 useState()보다 더 복잡한 상태 관리를 할 때 유용합니다.

useReducer()는 reducer 함수와 초기 상태(initial state)를 받아, 상태를 업데이트하는 dispatch 함수와 현재 상태(current state)를 반환합니다.

reducer 함수는 이전 상태와 액션(action)을 받아 새로운 상태를 반환하는 순수 함수(pure function)입니다. 이전 상태는 변경되지 않으며, 액션 객체에 따라 다른 상태를 반환합니다.

액션 객체는 type 속성과 함께 전달됩니다. type 속성은 상태를 어떻게 업데이트할지 나타내는 문자열입니다.

아래는 useReducer()를 사용하여 간단한 카운터 예제를 만든 코드입니다.

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

export default Counter;

위 코드에서 reducer 함수는 switch 문으로 구현되어 있습니다. action.type이 'increment'인 경우 state.count를 1 증가시키고, 'decrement'인 경우 1 감소시킵니다. 그 외의 경우에는 에러를 발생시킵니다.

Counter 컴포넌트에서는 useReducer()를 사용하여 state와 dispatch를 받습니다. 초기 상태는 { count: 0 }입니다. 그리고 버튼 클릭 이벤트에서 dispatch() 함수를 호출하며, 액션 객체를 전달합니다. 이전 상태와 액션 객체를 reducer 함수에 전달하여 새로운 상태를 반환받습니다. 반환된 상태는 state에 저장되어 렌더링됩니다.

이와 같이 useReducer()를 사용하면 복잡한 상태 관리를 보다 효율적으로 처리할 수 있습니다. 또한 reducer 함수는 순수 함수이므로 테스트 및 디버깅에 용이합니다.

그럼 Redux는 이제 버리는건가? 아니 그럼 여태 내가 배운거는 물거품? 시간낭비?

useReducer()와 Redux는 상태 관리를 위한 두 가지 서로 다른 방법입니다.

useReducer()는 React Hooks 중 하나로, React 내부에 내장되어 있습니다. 반면에 Redux는 React와 별개의 라이브러리입니다.

useReducer()를 사용하면 React 컴포넌트의 상태를 간단하게 관리할 수 있습니다. 그러나 상태가 복잡해질수록 코드가 길어지고 유지보수가 어려워질 수 있습니다. 이 때문에 Redux를 사용하면 복잡한 상태 관리를 보다 쉽게 처리할 수 있습니다.

Redux는 단일 스토어(single store) 패턴을 따르며, 모든 상태를 하나의 객체로 관리합니다. 애플리케이션의 상태를 관리하기 위해 action과 reducer를 사용합니다. 이러한 작업을 통해 복잡한 상태 관리를 보다 쉽게 처리할 수 있습니다.

Redux는 복잡한 애플리케이션에서 사용하기 좋습니다. 여러 컴포넌트 간의 상태 공유가 필요하거나, 비동기 데이터를 처리해야 하는 경우 Redux는 매우 유용합니다. 그러나 Redux를 사용하면 코드의 양이 증가하고, 상태를 변경하기 위해 많은 양의 코드를 작성해야 합니다.

뭘 선택해야 될지가 고민인 분들을 위한 한줄평!

따라서 useReducer()는 상대적으로 작은 규모의 프로젝트나 간단한 상태 관리를 위해 사용하고, Redux는 복잡한 애플리케이션에서 사용하는 것이 적절합니다.

내저장소 바로가기 luxury515

React 18에서 useContext()는 상태를 전역으로 관리하기 위해 사용되는 Hook 중 하나입니다. 이전에는 Redux와 같은 상태 관리 라이브러리를 사용하여 전역 상태를 관리해야 했지만, 이제 useContext()를 사용하여 전역 상태를 더 쉽게 관리할 수 있습니다.

useContext()를 사용하면 상위 컴포넌트에서 하위 컴포넌트로 전달할 필요없이 전역으로 상태를 관리할 수 있습니다. 이는 컴포넌트 트리 상의 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 특히 유용합니다.

다음은 useContext()를 사용하여 전역 상태를 관리하는 방법에 대한 예시 코드입니다.

// ThemeContext.js
import { createContext } from 'react';

export const ThemeContext = createContext('light');

// App.js
import { ThemeContext } from './ThemeContext';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <HomePage />
    </ThemeContext.Provider>
  );
}

// HomePage.js
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function HomePage() {
  const theme = useContext(ThemeContext);

  return (
    <div className={theme}>
      <h1>Welcome to My App</h1>
    </div>
  );
}

위의 예시 코드에서는 createContext()를 사용하여 ThemeContext를 생성합니다. createContext() 함수의 인수는 ThemeContext의 기본값을 설정합니다. App 컴포넌트에서는 ThemeContext.Provider를 사용하여 전체 앱의 테마를 "dark"로 설정합니다. HomePage 컴포넌트에서는 useContext()를 사용하여 ThemeContext의 값을 가져와서 해당 값으로 클래스 이름을 설정합니다.

이제, 어떤 컴포넌트에서든지 ThemeContext의 값을 가져와 사용할 수 있습니다. 만약 HomePage 컴포넌트가 중첩된 컴포넌트를 가지고 있다면, 해당 컴포넌트에서도 useContext()를 사용하여 ThemeContext의 값을 가져올 수 있습니다.

useContext()를 사용하면 컴포넌트 트리를 따라 상위 컴포넌트로 전달하는 것이 아니라, 컴포넌트 트리 상의 어떤 곳에서든지 값을 가져올 수 있습니다. 이를 통해 전역 상태를 더 쉽게 관리할 수 있습니다.

내저장소 바로가기 luxury515