myfit 프로젝트를 진행하며, 사용자 설문조사 화면을 제작했습니다.
예상보다 어려운 부분이 많았던 만큼, 그 과정을 기록으로 남기고자 이 글을 작성하게 되었습니다.
시작
가장 먼저 진행한 작업은 컴포넌트 분리였습니다.
ProgressBar와 하나의 질문을 담는 Container를 각각 컴포넌트로 분리한 뒤, 질문 Container를 map 함수로 렌더링하고 ProgressBar와 함께 하나의 화면에 구성했습니다.
유의할 점
먼저 설문조사를 만들기 전에 고려해야 할 점들이 있었습니다.
• 첫 번째 질문은 첫 질문과 그 다음 질문만 보여야 하고, 마지막 질문은 이전 질문과 마지막 질문만 보여야 합니다. (그 외의 질문들은 이전 질문과 현재 질문, 그리고 다음 질문이 보여야 함)
• 각 질문 간의 이동은 별도의 버튼 없이, 질문 컨테이너를 클릭하여 이동하도록 해야 합니다.
• 사용자의 점수를 totalScore 배열에 저장해야 합니다.
• 현재 질문에서 점수를 체크하면 자동으로 다음 질문으로 넘어가야 합니다.
질문 Container 만들기
[1, 2, 3, 4, 5]로 구성된 배열을 map 함수로 렌더링하고, 각 숫자가 선택될 때 상위 컴포넌트로 선택된 값을 전달하도록 구현했습니다.
그리고 selectedValue라는 상태(state)를 생성하여, 각 숫자(value)가 선택되었을 때 해당 값이 selectedValue와 일치하면 UI에 파란색으로 표시되도록 구현했습니다.
질문 Container 렌더링
이 부분은 몇 가지 제약사항 때문에 다소 복잡했습니다.
우선, 사전에 정의된 유의사항에 따라 첫 번째 질문과 마지막 질문은 각각 두 개씩 표시해야 했습니다.
이를 해결하기 위해 visibleItems라는 변수를 만들어 현재 렌더링할 질문 Container를 제어하도록 했습니다.
또한, 현재 질문이 몇 번째인지 확인하기 위해 currentIndex라는 상태(state)를 생성하여 상태 관리를 했으며, visibleItems는 아래의 함수로 결정되도록 구현했습니다.
질문간 이동
현재 질문에서 점수를 체크한 후 다음 질문으로 넘어가는 함수와, 질문 Container를 클릭하여 이동하는 함수를 분리했습니다.
질문 Container 클릭 시 이동하는 함수는 다음과 같습니다.
이슈
하지만 여기서 또 다른 문제가 발생했습니다.
기존에는 질문 Container에서 선택된 value 값을 상위 컴포넌트로 전달하여 totalScore 배열의 currentIndex에 추가하는 방식으로 구현했습니다.
그러나 질문 Container의 selectedValue 상태(state)를 초기값으로 null로 설정한 탓에 문제가 발생했습니다.
선택 당시에는 문제가 없었지만, 다다음 질문으로 이동했다가 다시 이전 질문으로 돌아올 경우 상태가 초기화되어 null 값이 적용되었고, 이로 인해 UI 상에서 선택된 항목이 표시되지 않는 현상이 나타났습니다.
이를 해결하기 위해 totalScore 배열을 처음부터 null로 초기화된 배열로 설정했습니다.
이후 currentScore라는 prop을 통해 totalScore[index] 값을 질문 Container로 내려주고, 이를 selectedValue 상태의 초기값으로 설정하여 문제를 해결했습니다.
이슈
또 다른 이슈는 설문조사 화면에서 질문 간의 이동 방식이 버튼 없이, 다음 질문 또는 이전 질문을 클릭하면 이동하도록 구현된 점이었습니다.
그런데 이동 중에 currentIndex와 다른 질문 Container의 숫자를 클릭하면 해당 값이 변경되는 문제가 발생했습니다.
이 문제를 해결하기 위해 disabled 속성을 활용했습니다. currentIndex와 질문 Container의 index가 일치하지 않는 경우, 해당 질문 Container를 비활성화(disabled) 상태로 설정하여 잘못된 값 변경을 방지했습니다.
진행도 측정
ProgressBar에서 진행도를 측정할 때, totalScore 배열에서 null 값의 개수를 파악하여 진행도를 계산했습니다.
끝으로
설문조사 화면 구현 과정에서 겪었던 여러 가지 문제와 그 해결 방안을 다뤄보았습니다. 각 질문의 이동 방식과 점수 선택, 그리고 UI 상태 관리에서 발생한 여러 제약을 고려하여 기능을 구현하는 과정이었습니다.
특히, 질문 간 이동과 점수 체크의 흐름을 유연하게 처리하기 위해 여러 가지 조건을 추가하고, 상태 관리를 통해 일관성 있는 사용자 경험을 제공하려 노력했습니다.
앞으로도 더 나은 코드를 작성하기 위해 계속해서 고민하고 개선해 나가겠습니다.
읽어주셔서 감사합니다!
