섹션6 헤더 마크업 - zustand 적용에 오류가 발생합니다 - 인프런

Next.js App router 기반 Chat GPT 만들기

Header 마크업

섹션6 헤더 마크업 - zustand 적용에 오류가 발생합니다

작성

// model.ts

import { create } from 'zustand';

type State = {
    model: string;
};

type Action = {
    updateModel: (model: State['model']) => void;  
};

const useModelStore = create<State & Action>((set) => ({
    model: 'gpt-3.5-turbo',
    updateModel: (model) => set(() => ({ model })),
}));

export { useModelStore };

// ModelSelect.tsx
'use client';

import { useModelStore } from '@/store/model';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';

const MODELS = ['gpt-3.5-turbo', 'gpt-4', 'gpt-4o'];

export default function ModelSelect() {
    const { model: currentModel, updateModel } = useModelStore((state) => ({
        model: state.model,
        updateModel: state.updateModel,
    }));

    const handleChange = (selectModel: string) => {
        updateModel(selectModel);
    };

    return (
        <Select value={currentModel} onValueChange={handleChange}>
            <SelectTrigger className="w-[180px] border-none focus:ring-transparent">
                <SelectValue placeholder="모델 선택" />
            </SelectTrigger>

            <SelectContent>
                {MODELS.map((model) => (
                    <SelectItem key={model} value={model} disabled={currentModel === model}>
                        {model}
                    </SelectItem>
                ))}
            </SelectContent>
        </Select>
    );
}

위 코드 적용 결과 아래와 같은 무한반복 에러가 발생합니다. 강의 내용과 비교해 보아도 문제를 찾지 못했습니다 ㅜㅜ

react typescript next.js tailwindcss zustand chatgpt

답변 2

코딩먹방

지식공유자

zustand가 특정 버전 부터는 항상 반환 객체가 새로 만들어 지면 리렌더링이 되도록 수정되었는데요.

useModelStore에서 샐렉터 함수(state => ({ ... })는 매번 새로운 객체를 반환 하기 때문에 내용이 같아도 새로운 참조가 생성되어 이전과 다르다고 판단해 무한 리렌더링이 일어나게 됩니다.

따라서 아래 처럼 각각 가져오시거나 맨아래 링크를 참고해서 useShallow 를 사용해보시면 해결될것으로 보입니다!

const model = useModelStore(state => state.model);

const updateModel = useModelStore(state => state.updateModel);

https://zustand.docs.pmnd.rs/guides/prevent-rerenders-with-use-shallow

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. skql2924님.

현재 발생하는 오류는 React에서 최대 업데이트 깊이를 초과해 발생하는 것으로 보이며, 이는 컴포넌트가 지속적으로 상태를 변경하게 되어 무한 반복 루프가 생겼을 때 발생합니다. 코드를 살펴보고 해결을 위한 몇 가지 지침을 제공하겠습니다.

문제의 원인

Select 컴포넌트의 value 속성과 onValueChange 이벤트로 인해 업데이트가 끊임없이 발생할 가능성이 있습니다. 특정 조건에서 상태 업데이트가 계속해서 트리거되고 있습니다.

해결 방법

SelectValue 컴포넌트를 정확히 사용하고 있는지 확인하세요:
- SelectValue의 placeholder 속성이 Select의 value와 잘 연계되어 있는지 점검하세요. placeholder가 아닌 value 속성이 디폴트 선택 값을 주어야 합니다.
리액트 상태 관리 로직 조정:
- 상태 업데이트가 올바르게 작동하는지를 확인하기 위해, 상태 변경이 발생할 때마다 불필요한 렌더링이 발생하지 않는지 코드 로직을 검토합니다.
검증 로직 추가:
- 상태가 동일할 경우에는 업데이트를 피하도록 조건문을 추가하여 상태 업데이트 작업을 최소화 할 수 있습니다.

const handleChange = (selectModel: string) => {
    if (selectModel !== currentModel) {
        updateModel(selectModel);
    }
};

참고 자료

공식 React 문서의 상태 관리 및 hooks 사용 가이드: React Docs - State and Lifecycle

위 조치를 시도한 후에도 문제가 지속된다면, 기존 코드와 비교하며 상태 관리가 적절히 이루어지는지를 점검하세요. 상태 변경과 관련한 로직이 불필요한 업데이트를 초래할 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변