상태 : 현재 페이지

[조건부렌더링]

현재 페이지가 변경되면 변경된 페이지에 맞는 컴포넌트를 보여준다.

컴포넌트는 총 몇개?

• input
• image-card-button
• image-button
• primary-button

버튼에 onClick 이벤트가 일어나면 상태가 변경된다.

단계별로 구현해보기

1. 현재 페이지에 부합하는 텍스트를 보여준다.

   1. questionList를 map을 돌면서 currentPage === questionList의 page id값이 일치하는지 확인한다.
   2. 일치하면 해당 page의 options를 출력한다.

   const [currentPage, setCurrentPage] = useState(1);
     questionList.map((el) => {
       currentPage === el.page ? console.log(el.question) : 1;
     });
   

   c. options를 렌더링 해보자.

   • 일치하는지는 이미 확인완료 그 확인한거에 대한 컴포넌트를 보여주면돼

2. type (select)

   1. input
   2. textarea
   3. primary
   4. image
   5. image-card