Today I learned

TIL. survey form

이 survey form 을 하기 위해서 2가지를 했다.
📌 첫번째, 다음 버튼을 누르면 값이 저장됨과 동시에 다음 질문을 불러온다.
📌 두번째, 그 순서에 따라서 위에있는 stepper line이 달라진다.

이번글에서는 첫번째만 작성하겠다.

survey form 에는 radio로 이루어진 질문 3개와 select로 이루어진 지역선택으로 이루어져있다.

radio 질문은 component 재사용화를 고려해서 구성했다. 모든 질문 데이터는 data.js라는 파일에 저장을 하고 사용했다

select도 radio와 비슷하게 사용되었기 때문에 radio component만 작성했다.

function Radio({ radioValue, question, getRadioValue }) {
  // 1. radioValue 는 내가 선택한 value와 여기있는 리스트중에 맞는게 있으면 checked가 되도록 하기 위헤서 사용했다.
  // 2. question 은 위에서 언급한 질문리스트를 저장해둔 데이터이다.
  // 3. getRadioValue 는 함수이며 내가 클릭한 값의 value를 가져오기 위해 사용되었다.
  return (
    <S.RadioBox>
      <S.Title>{question.Q1}</S.Title>
      <S.RadioWrap>
    //radio는 선택지 만큼 반복되어서 나온다.
        {question.answer.map((data, i) => {
          return (
            <S.RadioList
              key={i}
              onClick={() => getRadioValue([data, question.name])}
            >
              <S.InputWrap>
                <S.Input
                  type="radio"
                  name={question.id}
                  id={data}
                  onChange={() => getRadioValue([data, question.name])}
                  checked={data === radioValue[question.name]}
                />
                <S.Label htmlFor="">{data}</S.Label>
              </S.InputWrap>
            </S.RadioList>
          );
        })}
      </S.RadioWrap>
    </S.RadioBox>
  );
}

export default Radio;

다음은 이 모든 데이터를 관리하고 사용하는 최상위 컴포넌트인 surveyBox component다

여기에 사용된 함수는
크게 3가지다.
📌 첫번째, 내가 선택한 radio, select의 값을 가져오는 함수
📌 두번째, 클릭할때마다 + 혹은 - 를 기록하는 함수
📌 세번째, 그에 맞는 컴포넌트를 렌더링 해주는 함수

첫번째는 아래와같다.

//select된 값을 가져오는 함수
  const getSelectValue = e => {
    const { value } = e.target;
    setSelectedTown(value);
  };

//선택된 radio값을 가져오는 함수
  const getRadioValue = data => {
    const [question, value] = data;

    setRadioValue({ ...radioValue, [value]: question });
  };

두 함수 다 onClick event 로 값을 가져오는게 아닌 onChange로 값을 가져온다.

두번째도 아래와 같다

//currentQ는 계속 변하는 숫자이다.
// 현재 3개의 radio질문과 1개의 select 질문이 있으므로 총 count되는 수가 3을 넘어가지 않도록 설정한다.
  const clickNextBtn = () => {
    //각 수에 도달했을때 그때 받는 value가 비어있으면 currentQ를 변하게 하는 함수를 불러 오지 못하도록 설정했다.
    if (
      (currentQ === 0 && radioValue.gender !== '') ||
      (currentQ === 1 && radioValue.age !== '') ||
      (currentQ === 2 && radioValue.career !== '')
    ) {
      plusCurrentQ();
    } else if (currentQ === 3 && selectedTown !== '') {
      // select가 마지막 질문이기때문에 여기서 다음 버튼이 클릭되면 이는 질문이 다 끝났다는 뜻으로 loading을 보여주는 함수들을 실행한다.(따로 블로깅 할 예정)
      setLoading(true);
      loadingTime();
    }
  };

  const plusCurrentQ = () => {
    
    //질문이 총 4개 이므로 사용할 수 있는 수는 0,1,2,3이고 3보다 작을때만 currentQ를 +1 해준다.
    if (currentQ < 3) {
      setCurrentQ(currentQ + 1);
    }
  };

    //아래도 prev버튼을 눌렀을때 0 보다 작은 수가 나오면 안되기 때문에 0 밑으로는 currentQ가 바뀌지 않게 설정
// 뒤로 갈때마다 다시 질문을 설정할 수 있게 vlaue를 없애준다.
  const clickPrevBtn = () => {
    if (currentQ === 0) {
      setCurrentQ(0);
      setRadioValue('');
    } else if (currentQ > 0) {
      setCurrentQ(currentQ - 1);
    }
  };

세번째는 아래 링크에 있다.
조건부 함수로 component return!

이렇게해서 모든 설문지를 다 받으면 다음 창으로 넘어간다.