1006 TIL-U

사실 앞부분 TIl 아니다. 강의 얼만큼 들을건지, 말씀 안드리고 와서 그냥 여기로 알려드려야겠다! 신경안쓰실것 같은데, 그냥 제가 하는 저와의 약속이랍니당/

지난 번 섹션 12(연습플젝)까지 였고, 2주간은,
Section13(리액트와 최적화 테크닉 살펴보기)~Section22(리액트앱 인증 추가하기)까지 해보겠습니당, (할 수 있,,겠,,지,,,,,)

Section 12

TIL1) 컴포넌트 분리를 통해 문제 해결하기

문제 상황

퀴즈 앱을 개발하면서 UI가 복잡해지고 유지보수가 어려운 문제를 겪었다. 여러 기능과 화면 요소가 하나의 컴포넌트에 몰려 있었고, 이로 인해 코드가 길어지고 복잡해졌다.

다음과 같은 문제들이 발생했다:

상태 관리가 복잡: 퀴즈 질문, 답변 선택, 점수 계산 등 모든 로직이 하나의 컴포넌트에 집중되어 상태 관리가 어려웠다.

재사용성 저하: 퀴즈 화면의 일부 요소들은 다른 화면에서도 재사용할 수 있었지만, 하나의 큰 컴포넌트 안에 묶여있어 재사용할 수 없었다.

테스트가 어렵다: 컴포넌트 하나에서 많은 기능을 처리하다 보니, 개별 기능을 테스트하는 것이 까다로웠다.

해결 방법: 컴포넌트 분리

이 문제를 해결하기 위해 컴포넌트를 작은 단위로 분리하여 처리. 이 과정에서 얻은 핵심 전략은 다음과 같다.

질문 컴포넌트 분리
퀴즈의 질문을 표시하는 부분을 Question 컴포넌트로 분리함. 이 컴포넌트는 질문 텍스트와 상태를 관리하고, 퀴즈의 흐름에서 질문이 어떻게 표시되는지 독립적으로 다룰 수 있게 되었다.

function Question({ questionText }) {
  return <h2>{questionText}</h2>;
}

답변 컴포넌트 분리

여러 답변을 관리하던 코드를 AnswerList와 AnswerItem 컴포넌트로 나눔
각각의 답변을 개별적으로 렌더링하고 클릭 이벤트를 처리할 수 있도록 개선함

function AnswerItem({ answer, onSelect }) {
  return <button onClick={() => onSelect(answer)}>{answer}</button>;
}

function AnswerList({ answers, onSelectAnswer }) {
  return (
    <div>
      {answers.map((answer) => (
        <AnswerItem key={answer} answer={answer} onSelect={onSelectAnswer} />
      ))}
    </div>
  );
}

점수 계산 로직 분리

점수 계산 로직은 Score 컴포넌트로 따로 빼내어 관리했다. 이 컴포넌트는 현재 점수를 관리하고, 최종 점수를 렌더링하는 역할을 맡았다

function Score({ totalScore }) {
  return <p>Score: {totalScore}</p>;
}

퀴즈 전체 흐름 분리

퀴즈 진행 전체를 관리하던 로직을 Quiz 컴포넌트로 분리했다. 이 컴포넌트는 Question, AnswerList, Score 컴포넌트를 조합하여 전체 흐름을 제어함

function Quiz({ questions }) {
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [score, setScore] = useState(0);

  const handleAnswerSelect = (answer) => {
    // 답변 선택 시 점수 계산 로직
    setScore(score + 1); // 예시
    setCurrentQuestionIndex(currentQuestionIndex + 1);
  };

  return (
    <div>
      <Question questionText={questions[currentQuestionIndex].questionText} />
      <AnswerList answers={questions[currentQuestionIndex].answers} onSelectAnswer={handleAnswerSelect} />
      <Score totalScore={score} />
    </div>
  );
}

So

코드의 가독성 증가: 컴포넌트를 분리한 후 각 컴포넌트는 독립적인 역할을 가지게 되어 코드가 한눈에 보기 좋아졌다.

재사용성 향상: AnswerList, Score 같은 컴포넌트는 퀴즈뿐만 아니라 다른 기능에서도 사용할 수 있게 됨.

유지보수성 강화: 개별 기능이 독립적인 컴포넌트로 분리되어, 문제 발생 시 해당 컴포넌트만 수정하면 되므로 유지보수성이 크게 개선됨.

테스트 용이성: 각 컴포넌트를 별도로 테스트할 수 있어, 에러를 찾아내고 수정하는 데 편함.