마이페이지는 왜 React로 개발해야 하나?

<nav x-data>
    <!-- 7개 메뉴 -->
    @click.prevent="$store.mypage.showSection('profile')"
    :class="{ 'active': $store.mypage.activeSection === 'profile' }"

// 현재 구조
<nav x-data>
    @click.prevent="$store.mypage.showSection('profile')"
    :class="{ 'active': $store.mypage.activeSection === 'profile' }"
</nav>

<!-- 각 섹션 -->
<section x-show="$store.mypage.activeSection === 'profile'"
         x-data="mypageProfile()">

// 현재 프로필 이미지 업로드
<input type="file"
       x-ref="profileImageInput"
       accept="image/*"
       @change="previewProfileImage($event)">

// previewProfileImage 함수에서 해야 할 일
1. 파일 유효성 검사
   - 파일 크기 (5MB 이상 거부)
   - 파일 타입 (JPG, PNG, GIF, WebP만)
   - 이미지 해상도 (너무 크면 거부)

2. 프리뷰 이미지 생성
   - FileReader API 사용
   - Base64로 변환
   - 이미지 표시

3. 폼 상태 업데이트
   - 원본 파일 저장
   - 프리뷰 URL 저장
   - 변경 상태 표시

4. 저장 로직
   - FormData 생성
   - 파일 업로드
   - 서버 응답 처리
   - 새 이미지 URL 반영
   - 기존 이미지 삭제?

이 모든 것을 Alpine.js에서 관리하면?
→ x-data에 메서드 30개+
→ 로직 이해 불가능
→ 버그 발생 가능성 높음

// 내가 쓴 글/댓글 섹션
// 각각 무한 스크롤 필요

// Alpine.js로 구현:
x-data="mypageProfile()" {
    items: [],
    currentPage: 1,
    loading: false,
    hasMore: true,

    async loadMore() {
        if (this.loading || !this.hasMore) return;
        this.loading = true;
        // API 호출
        // 데이터 추가
        // 로딩 상태 업데이트
        this.loading = false;
    }
}

// 현재 닉네임 입력
<input type="text" name="nick_name" value="{{ $form_nick }}" required>

// 여러 곳에 상태가 분산됨
$store.mypage.activeSection        // Store (공유)
this.formData                        // x-data (로컬)
this.loading                         // x-data (로컬)
this.previewImage                    // x-data (로컬)

// 어떤 상태가 어디서 관리되는지 불명확

// 중앙 집중식 상태 관리
const [activeSection, setActiveSection] = useState('profile');
const [formData, setFormData] = useState({
    user_name: '',
    nick_name: '',
    email: '',
    phone: ''
});
const [loading, setLoading] = useState(false);
const [previewImage, setPreviewImage] = useState(null);

// 모든 상태가 명확함
// 어디서 업데이트되는지 추적 가능
// 타입 안전 (TypeScript)

// 문제: HTML value와 x-data 동기화 불명확
<input type="text" name="nick_name" value="{{ $form_nick }}">
// ↑ 초기값은 PHP에서, 변경은 Alpine에서?

// 표준 패턴
const [formData, setFormData] = useState({
    nick_name: initialData.nick_name
});

const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({
        ...prev,
        [name]: value
    }));
};

return (
    <input
        type="text"
        name="nick_name"
        value={formData.nick_name}
        onChange={handleInputChange}
    />
);

// previewProfileImage 함수에서 모든 로직 처리
async previewProfileImage(event) {
    // 1. 파일 검증
    // 2. 프리뷰 생성
    // 3. 상태 업데이트
    // 4. 저장 로직
    // → 메서드가 너무 복잡
}

// 작은 역할별 함수 분리
const validateFile = (file) => {
    if (file.size > 5 * 1024 * 1024) return '파일이 너무 큽니다';
    if (!['image/jpeg', 'image/png'].includes(file.type)) {
        return '지원하지 않는 파일 형식입니다';
    }
    return null;
};

const createPreview = async (file) => {
    return new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = (e) => resolve(e.target.result);
        reader.readAsDataURL(file);
    });
};

const handleImageUpload = async (e) => {
    const file = e.target.files[0];

    // 1. 검증
    const error = validateFile(file);
    if (error) {
        setErrors(prev => ({ ...prev, image: error }));
        return;
    }

    // 2. 프리뷰
    const preview = await createPreview(file);
    setPreviewImage(preview);

    // 3. 업로드
    await uploadProfileImage(file);
};

// 매번 처음부터 구현
async loadMore() {
    // DOM 전체 리렌더링
    // 성능 최적화 안 함
    // 가상 스크롤링 불가능
}

import { useInfiniteQuery } from '@tanstack/react-query';

const MyPostsSection = () => {
    const {
        data,
        fetchNextPage,
        hasNextPage,
        isFetchingNextPage
    } = useInfiniteQuery({
        queryKey: ['myPosts'],
        queryFn: fetchUserPosts,
        getNextPageParam: (lastPage) => lastPage.nextCursor
    });

    const [ref] = useInView({
        onInView: () => {
            if (hasNextPage && !isFetchingNextPage) {
                fetchNextPage();
            }
        }
    });

    return (
        <VirtualList
            items={data?.pages.flatMap(p => p.items) || []}
            renderItem={(item) => <PostCard post={item} />}
            onScrollToEnd={ref}
        />
    );
};

// 검증 로직이 분산됨
@change="validateNickname($event)"
@blur="checkNicknameDuplicate($event)"
@submit="validateForm($event)"

// 어떤 검증이 어디서 일어나는지 추적 불가

import { useForm } from 'react-hook-form';

const ProfileForm = () => {
    const { register, watch, formState: { errors }, handleSubmit } = useForm({
        mode: 'onBlur',  // 모드 명확
        resolver: profileFormResolver  // 중앙 검증 함수
    });

    // 실시간 검증
    const nickName = watch('nick_name');
    const [isDuplicate, setIsDuplicate] = useState(false);

    useEffect(() => {
        if (nickName.length > 2) {
            checkNicknameDuplicate(nickName).then(setIsDuplicate);
        }
    }, [nickName]);

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register('nick_name', {
                required: '닉네임은 필수입니다',
                minLength: { value: 2, message: '최소 2자입니다' },
                maxLength: { value: 20, message: '최대 20자입니다' }
            })} />
            {errors.nick_name && <span>{errors.nick_name.message}</span>}
            {isDuplicate && <span>이미 사용 중인 닉네임입니다</span>}
        </form>
    );
};

// 메뉴 클릭
@click.prevent="$store.mypage.showSection('profile')"

// 섹션 표시
x-show="$store.mypage.activeSection === 'profile'"

// 문제: showSection이 뭘 하는지 불명확
// activeSection이 어디서 변경되는지 추적 어려움

// 명확한 탭 구조
const SECTIONS = {
    PROFILE: 'profile',
    POSTS: 'posts',
    COMMENTS: 'comments',
    BOOKMARKS: 'bookmarks'
};

const MyPage = () => {
    const [activeSection, setActiveSection] = useState(SECTIONS.PROFILE);

    const handleSectionChange = (section) => {
        setActiveSection(section);
        // 섹션 변경 로직이 한 곳
    };

    return (
        <>
            <Sidebar activeSection={activeSection} onSelect={handleSectionChange} />
            <ProfileSection visible={activeSection === SECTIONS.PROFILE} />
            <PostsSection visible={activeSection === SECTIONS.POSTS} />
            {/* ... */}
        </>
    );
};

// 각각 다른 방식으로 에러 처리
try {
    // API 호출
} catch (error) {
    // x-show로 에러 표시?
    // alert 띄우기?
    // 모달 띄우기?
    // 불명확
}

const useFormSubmit = (onSuccess) => {
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(false);

    const submit = async (data) => {
        setLoading(true);
        setError(null);

        try {
            const result = await submitForm(data);
            onSuccess(result);
        } catch (err) {
            setError(err.message);
        } finally {
            setLoading(false);
        }
    };

    return { error, loading, submit };
};

// 사용
const ProfileForm = () => {
    const { error, loading, submit } = useFormSubmit(() => {
        showSuccessToast('프로필이 업데이트되었습니다');
    });

    return (
        <form onSubmit={submit}>
            {error && <ErrorAlert message={error} />}
            {/* ... */}
        </form>
    );
};