자 이제 시작해 봅시다
같이 퀴즈 프로젝트를 빌드해 보겠습니다
몇 가지 컴포넌트를 추가하면서 시작해 보겠습니다
첫 번째 단계로서
src (소스폴더) 안에 컴포넌트 폴더를 추가할 것입니다
그리고 헤더 파일(Header.jsx)을 추가하고자 합니다
그 안에 페이지 맨 위에 보여지는 헤더를 보관할 것입니다
그리고 퀴즈 파일(Quiz.jsx)을 추가해 줍니다
이번 섹션 전에 보셨던 것처럼
이번 섹션에서는
퀴즈 웹 앱을 만들 예정입니다
그렇기에 이와 같이 Quiz 컴포넌트를 추가할 것입니다
이 컴포넌트를 이용해서 퀴즈를 제어하고
그리고 다른 퀴즈와 관련된 컴포넌트를 렌더링할 겁니다
그렇지만 일단 헤더로 시작을 할 겁니다
헤더 파일에 Header 함수 컴포넌트를 만들어서
내보내겠습니다
이 내용은 이전 강의에서
여러 번 다룬 적이 있습니다
그러고 나서 빌트인 헤더 요소를 반환하겠습니다
img (이미지)와 h1 요소로 감싸겠습니다
h1 요소가
페이지에서 메인 타이틀을 표시하고
ReactQuiz를 반환하겠습니다
그리고 헤더에 사용할 이미지가
이 퀴즈 로고 png 파일입니다
여기 중요한 부분이 하나 있습니다
영상을 잠시 멈춰도 좋습니다
강의 중 언제든 그렇게 하셔도 됩니다
다음 단계를 자신의 힘으로 해보고 싶으신 분들은 그렇게 하십시오
예를 들어
이 곳에 이미지를 표시하고 싶다고 말하고
제가 어떤 이미지인지 알려드리면
영상을 멈추셔서
이미지에 필요한 코드를 혼자 힘으로 추가해 보시기 바랍니다
이는 새로운 컴포넌트를 추가하기 시작할 때도 마찬가지입니다
또는 상태를 관리하기 시작할 때 등의 상황이 있습니다
어떤 작업을 할 예정이라고 알려드릴 때마다
영상을 꼭 잠시 멈춰보시고
스스로 해 보시기 바랍니다
그렇게 하면 좋은 연습의 기회가 될 것입니다
그래서, 여기에, 이 퀴즈 로고 파일을 표시하기 위해서
헤더 파일로 돌아가겠습니다
그리고 logoImg from을 가져오겠습다
컴포넌트 폴더에 있으니
한 층위 올라갑니다
그리고 assets 폴더로 들어갑니다
그리고 거기에 필요한
퀴즈 로고 png 파일이 있습니다
이 import가 추가 되었습니다
Vite (비트) 기반 프로젝트를 사용하는
대부분의 리액트 프로젝트에는
이미지의 출처를
여기 가져온 logoImg에 설정할 수 있습니다
그리고 프로젝트 설정은
보이지 않게 최적화가 된
이미지로의 경로를 찾아서 주입합니다
이제 여기에 대체 텍스트를 추가해서
'퀴즈 로고'라고 하겠습니다
원하시면 여기에 좀 더 설명을 넣으셔도 됩니다
이제 아주 기초적인 컴포넌트를 만들어 냈습니다
아직 Effect도 상태도 없습니다
모든 컴포넌트가 그 요소들을 필요로 하지는 않기 때문입니다
당연히 대부분의 컴포넌트는 상태나
Effect를 필요로 하지 않습니다
이제 header 컴포넌트를 추가하겠습니다
앱 파일(App.jsx)의 앱 컴포넌트 파일로 가서
/components Header.jsx를 가져오겠습니다
그리고 이 커스텀 컴포넌트를 반환하겠습니다
그리고 전부 저장하면
이제 여기 이 헤더가 페이지에 보입니다
아주 훌륭한 첫 단계였습니다
기초적인 내용이었습니다
바로 이어서 가 보겠습니다
Quiz 컴포넌트 작업을 시작하겠습니다
이제 이 컴포넌트에 대한 제 목표는
현재 활성화된 질문을
사용자에게 보여주는 것입니다
사용자가 답변을 작성하면
그 때 다른 질문으로 교체하겠습니다
그래서 이 Quiz 컴포넌트가
질문을 진행하고 사용자 답변을
등록하게 됩니다
먼저는 Quiz로 이름을 지은
새로운 컴포넌트 함수를 내보내면서 시작합니다
이미 언급했던 이 컴포넌트 안에
질문을 반환해야 합니다
'현재 활성화된 질문'은
곧 더 의미 있는 내용으로
교체하도록 하겠습니다
이런 작업을 하고
언급했듯 컴포넌트 안에서는
현재 활성화된 질문을 관리하고
다른 질문으로 바꿀 것입니다
사용자가 질문에 답을 할 때마다
그리고 답변들을 저장하고 싶을 때마다 실행되빈다
그러므로, 여기서 상태 몇 가지를 관리할 필요가 있습니다
리액트로부터 가져온 useState 훅을 사용하겠습니다
예를 들어 답변을 등록해 둘 필요가 있을 수 있습니다
그래서 여기에 두 가지 상태를 추가하겠습니다
첫 번째 상태는
현재 활성화된 질문입니다
간단하게 질문의 배열을
만든다고 가정하겠습니다
해당 배열이 될 가짜 데이터를
곧 제공해 드리겠습니다
현재 활성화된 질문은
해당 내용의 index (인덱스)를 통해
간단하게 관리할 수 있습니다
만일 질문이 담긴 배열들을 보유한다면
단순하게 현재 활성화된 질문의
인덱스를 관리하면 됩니다
사용자가 질문에 답을 할 때마다 인덱스를 변경하면 됩니다
이제 activeQuestionIndex를 여기 추가 해줍니다
그리고 setActiveQuestionIndex 업데이트 함수를 추가하겠습니다
이 방식으로 어떤 질문을 사용자에게 표시할지
관리할 수 있습니다
그리고 두 번째 상태도 여기에 추가하겠습니다
사용자에 의해 선택된 답을 등록하기 위함입니다
왜냐하면 모든 질문이
여러 가능한 답안을 가지게 될 것이기 때문입니다
당연하게도, 퀴즈 중에
사용자가 선택한 답들을 모두 저장해야 합니다
그러기 위해서
그러한 답안들을 저장하게 될 상태 몇 가지가 필요합니다
그리고 이 또한 배열이 될 수 있습니다
그리고 해당 배열에 각 답을 추가하겠습니다
상태에 이름을 주겠습니다
userAnswers와 setUserAnswers로 하겠습니다
사용자가 선택한 답이기 때문입니다
미리 말씀을 드리자면
이것이 해당 상태를 관리하는 방식 중 하나이지만
제 생각에는 가장 적합한 방식은 아닙니다