[ useMemo ] 복잡한 React 로직을 쉽게 관리하는 방법

루비·2024년 6월 13일

React

목록 보기

5/6

코드에서 useMemo와 관련된 로직이 많아 복잡성이 증가한다면, 코드 분할을 통해 관리성과 가독성을 개선할 수 있습니다. 코드 분할은 반복되는 로직을 별도의 모듈이나 유틸리티 함수로 분리하는 것입니다. 이를 통해 코드의 재사용성을 높이고, 유지보수 작업을 더 쉽게 할 수 있습니다.

코드 분할을 위한 전략

유틸리티 함수로 분리: 반복되는 로직이나 공통된 계산을 유틸리티 함수로 분리합니다.
커스텀 훅(Custom Hooks) 사용: 복잡한 상태 로직이나 useMemo를 사용한 데이터 계산을 커스텀 훅으로 분리하여 재사용성을 높입니다.
상수 파일로 분리: 고정된 옵션이나 설정 값 등을 상수 파일로 분리하여 유지보수성을 높입니다.
컴포넌트 파일로 분리: 독립적으로 동작하는 UI 컴포넌트를 별도의 파일로 분리합니다.

예제: 코드 분할

다음은 useMemo와 관련된 로직을 여러 파일로 분할하는 예제입니다.

1. 유틸리티 함수로 분리

공통된 옵션 변환 로직을 유틸리티 함수로 분리합니다.

utils/optionUtils.ts

import { OptionType } from '../types';

// OptionType 정의
export interface OptionType {
    value: string;
    label: string;
}

// AI 모델 옵션을 변환하는 유틸리티 함수
export const mapOptions = (options: OptionType[]) => {
    return options.map(({ value, label }) => ({ value, label }));
};

2. 커스텀 훅으로 분리

각 상황에 맞는 옵션을 생성하는 로직을 커스텀 훅으로 분리합니다.

hooks/useModelOptions.ts

import { useMemo } from 'react';
import { OptionType } from '../types';
import { mapOptions } from '../utils/optionUtils';

const TYPE_ID = '123n1212'
export const useModelOptions = (
    Id?: string,
    MODEL_OPTIONS: OptionType[],
    AI_MODEL_OPTIONS: OptionType[],
) => {
    return useMemo<OptionType[]>(() => {
        if (Id === TYPE_ID) {
            return mapOptions(CLAUD_MODEL_OPTIONS);
        }
        return mapOptions(GPT_MODEL_OPTIONS);
    }, [Id, GPT_MODEL_OPTIONS, CLAUD_MODEL_OPTIONS]);
};

3. 상수 파일로 분리

고정된 옵션을 상수 파일로 분리하여 관리합니다.

constants/aiModelOptions.ts

import { OptionType } from '../types';

export const CLAUD_MODEL_OPTIONS: OptionType[] = [
    { value: 'claud-1', label: 'Claud Model 1' },
    { value: 'claud-2', label: 'Claud Model 2' },
];

export const GPT_MODEL_OPTIONS: OptionType[] = [
    { value: 'gpt-3', label: 'GPT-3' },
    { value: 'gpt-4', label: 'GPT-4' },
];

4. 컴포넌트 파일로 분리

Select 컴포넌트 로직을 사용하여 각종 옵션을 선택하는 컴포넌트를 분리합니다.

components/SelectComponent.tsx

import React from 'react';
import Select from 'react-select';
import { OptionType } from '../types';

type SelectComponentProps = {
    options: OptionType[];
    onChange: (selectedOption: OptionType | null) => void;
};

const SelectComponent: React.FC<SelectComponentProps> = ({ options, onChange }) => {
    return (
        <Select
            options={options}
            onChange={(option) => onChange(option as OptionType | null)}
        />
    );
};

export default SelectComponent;

5. 메인 컴포넌트

분리된 코드들을 통합하여 메인 컴포넌트에서 사용합니다.

components/MainComponent.tsx

import React from 'react';
import SelectComponent from './SelectComponent';
import { useModelOptions } from '../hooks/useModelOptions';
import { CLAUD_MODEL_OPTIONS, GPT_MODEL_OPTIONS } from '../constants/aiModelOptions';
import { OptionType } from '../types';

type Info = {
    info: {
        id: string;
    };
};

type MainComponentProps = {
    info: Info | null;
};

const MainComponent: React.FC<MainComponentProps> = ({ info }) => {
    const gptModelOptions = useModelOptions(
        info?.id,
       	CLAUD_MODEL_OPTIONS,
        GPT_MODEL_OPTIONS,
    );

    const handleOptionChange = (selectedOption: OptionType | null) => {
        console.log('Selected Option:', selectedOption);
    };

    return (
        <div>
            <h1>Select AI Model</h1>
            <SelectComponent options={gptModelOptions} onChange={handleOptionChange} />
        </div>
    );
};

export default MainComponent;