새로고침시 시간 인풋과 버튼의 상태가 초기화 되는 문제
zustand를 이용
import create from 'zustand';
interface SidebarState {
selectedLocation: string;
selectedDateTime: string;
finalDateTime: string;
isTimePicked: boolean;
setSelectedDateTime: (dateTime: string) => void;
setFinalDateTime: (dateTime: string) => void;
setIsTimePicked: (isPicked: boolean) => void;
}
export const useSidebarStore = create<SidebarState>((set) => ({
selectedLocation: '',
selectedDateTime: '',
finalDateTime: '',
isTimePicked: false,
setSelectedDateTime: (dateTime) => set({ selectedDateTime: dateTime }),
setFinalDateTime: (dateTime) => set({ finalDateTime: dateTime }),
setIsTimePicked: (isPicked) => set({ isTimePicked: isPicked })
}));
JavaScript
복사
하지만 버튼의 상태는 유지되지 않았다.
useEffect(() => {
const fetchData = async () => {
if (!chatRoomId) {
return;
}
const { data: chatData } = await clientSupabase
.from('chatting_room')
.select('meeting_time')
.eq('chatting_room_id', chatRoomId)
.single();
const meetingTime = chatData?.meeting_time;
setIsTimePicked(!!meetingTime);
setSelectedDateTime(meetingTime || '');
setFinalDateTime(meetingTime || '');
};
fetchData();
}, []);
JavaScript
복사
setIsTimePicked(!!meetingTime);
!!는 meetingTime 값을 부울로 변환하는 데 사용
그러니까 meetingTime이 있으면 true → setIsTimePicked⇒ true ⇒ isTimePicked=true가된다.
<button onClick={handleSelectedTime}>{isTimePicked ? '취소' : '선택'}</button>
버튼이 잘 나온다.