import React, { useState } from 'react';
import styled from 'styled-components';
import BirthDate from './BirthDate';
import Education from './Education';
import Qualifications from './Qualifications';
import AdditionalPoints from './AdditionalPoints';
import * as m from './style'; // 스타일을 동일하게 가져오기

const PageContainer = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
`;

const PredictionForm = () => {
  const [step, setStep] = useState(1);

  const renderComponent = () => {
    switch (step) {
      case 1:
        return <BirthDate />;
      case 2:
        return <Education />;
      case 3:
        return <Qualifications />;
      case 4:
        return <AdditionalPoints />;
      default:
        return null;
    }
  };

  return (
    <PageContainer>
      {renderComponent()}
      <m.ButtonContainer>
        <m.Button
          onClick={() => setStep(step - 1)}
          disabled={step === 1}
          style={{
            backgroundColor: step === 1 ? '#cccccc' : '#437550',
            cursor: step === 1 ? 'not-allowed' : 'pointer',
          }}
        >
          이전
        </m.Button>

        <m.Button
          onClick={() => setStep(step + 1)}
          disabled={step === 4}
        >
          {step === 4 ? '시작' : '다음'}
        </m.Button>
      </m.ButtonContainer>
    </PageContainer>
  );
};

export default PredictionForm;

1. React 상태 관리와 API 호출

• React 상태 관리
  • useState를 활용해 컴포넌트의 로컬 상태 관리.
  • API 요청 결과를 상태로 저장하여 컴포넌트에서 활용.
• API 호출과 비동기 처리
  • fetch를 이용한 데이터 요청 및 async/await 패턴 사용.
  • 로딩 상태(loading)와 에러 상태(error)를 관리하여 사용자 경험 향상.

2. TypeScript로 안정적인 코드 작성

• TypeScript 에러 해결
  • catch 블록에서의 에러 타입(unknown) 처리.
  • instanceof Error를 활용한 타입 가드로 에러 메시지 안전하게 접근.
• 유형 명시의 중요성
  • 상태(useState)에 명시적인 타입 추가로 런타임 오류 방지.
  • 컴포넌트에서 명확한 데이터 타입 정의.

3. Styled-Components로 UI 구성

• Styled-Components 활용
  • 버튼과 컨테이너 스타일링에 props 활용.
  • 상태에 따라 스타일 동적으로 변경:
    • 비활성화 상태(disabled)의 버튼 색상 및 커서 처리.

4. 단계별 컴포넌트에서 단일 데이터 렌더링으로 전환

• 단일 데이터 렌더링
  • 기존의 단계별 렌더링 로직을 제거하고 간소화.
  • API에서 받아온 데이터를 JSON 형식으로 전체 출력.
• 컴포넌트 구조 단순화
  • 필요 없는 하위 컴포넌트를 제거하여 단일 컴포넌트로 동작.

5. 에러 처리 전략

• 로딩과 에러 상태 관리
  • loading 상태로 로딩 중 메시지 표시.
  • 에러 발생 시 사용자에게 적절한 메시지 제공.
  • 예상치 못한 에러에 기본 메시지 설정.

소감

오늘 학습을 통해 React와 TypeScript를 활용한 상태 관리와 API 데이터 처리의 중요성을 깊이 이해할 수 있었습니다. 특히, 비동기 처리와 에러 관리에 대해 구체적으로 다뤄보면서 안정적이고 견고한 코드를 작성하는 방법을 배울 수 있었습니다.

TypeScript의 unknown 타입 처리와 instanceof를 활용한 에러 관리 과정에서, 타입스크립트의 엄격한 타입 검사가 코드의 안정성을 얼마나 높이는지 다시 한번 깨닫게 되었습니다. 또한, API 호출 시 로딩 상태와 에러 상태를 명확히 구분해 사용자 경험을 개선하는 방법을 익히며 실무에서의 활용 가능성을 크게 느꼈습니다.

단계별로 데이터를 처리하던 기존 구조를 간소화하면서 코드의 가독성과 유지보수성을 높였다는 점에서 큰 만족감을 느꼈습니다. 복잡한 로직을 간결하게 정리하는 과정에서, "코드는 단순할수록 좋다"는 개발의 기본 원칙을 다시금 떠올릴 수 있었습니다.

다만, TypeScript의 고급 타입 활용 능력이 아직 부족하다는 점과 API 데이터 구조를 UI와 더욱 효율적으로 연결하는 방법에 대한 고민이 남아 앞으로 보완해야 할 과제로 느껴졌습니다.