Today I learned

TIL. 기억하고 싶은 코드

📌 배열 구조분해 할당

객체 구조분해 할당을 할때는 const { value } = e.target 이런식으로 사용해줬다.
하지만 배열을 어떻게 사용해야하는지 몰랐는데 이번기회에 배울 수 있었다.

배열구조분해 할당을 하지 않았을 때 코드

const career = radioValue.career.split('~')[0];

이런식으로 맨뒤에 배열의 몇번째 자식인지 정해줬다.
하지만, 구조분해 할당을 해주는게 훨씬 편하다.

배열 구조분해 할당을 한 코드

const [career] = radioValue.career.split('~');

구조분해 할당을 한 첫번째 변수는 배열의 첫번째 인자를 가르키고 그 다음에 써주면 두번째 인자를 가르킨다. 아주 편한 방법이다. 간단하거니까 기억해야지 !

📌 맵핑

어떤 조건에 의해서 속성 값이 달라져야하는 경우 나는 항상 if else 문법을 사용했다.
줄일 수 있는 부분에서는 줄여줘야하는데 그 방법을 제대로 사용하지 못했던것 같다.

맵핑하기 전 코드

 if (answer.name === '0') {
          setRadioValue({ ...radioValue, gender: answer.id });
        } else if (answer.name === '1') {
          setRadioValue({ ...radioValue, age: answer.id });
        } else {
          setRadioValue({ ...radioValue, career: answer.id });

딱 봐도 이 코드는 굉장히 효율적이지 못하다고 생각한다.
answer.name 의 값이 0, 1, 2일때마다 그에 맞는 객체가 setState되어야하는데 좀 더 간편하고 효율적이게 바꿨다.

맵핑한 코드

const getRadioValue = data => {
    const [question, value] = data;

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

📌 맵핑용 객체를 가진 함수에서 component return

가장 어려운 부분이었다.
맵핑용 객체를 만드는 것은 했지만 component를 return 하는 함수라니....
어려웠다. 아니, 함수에서 component를 return 할 수는 있었지만 그 사용방법을 몰랐다.
그럼, 그 함수를 밑에서 바로 선언해주나???라는 식의 궁금증이있었다.

그리고 그 해답을 찾았다.

원래 나는 currentQ라는 count를 해주는 state가 있었고 질문이 넘어갈때마다 다음 질문을 가져오기 위한 count 였다.

맵핑하기전

  {currentQ === 0 && (
     <Radio question={questionOne} getRadioValue={getRadioValue} />
                )}
  {currentQ === 1 && (
     <Radio question={questionTwo} getRadioValue={getRadioValue} />
                )}
  {currentQ === 2 && (
     <Radio question={questionThree} getRadioValue={getRadioValue}
                  />
                )}
  {currentQ === 3 && (
     <Select SelectData={SelectData} getSelectValue={getSelectValue}
                  />

이런식으로 모든 컴포넌트를 숫자에 따라 다른 속성값을 전달해줬다. 나도 이 방법이 되게 비효율적이라는것을 알지만 했던 이유는 이게 확실히 다른 컴포넌트가 나오는 방법이라고 생각했기때문이다. 그리고 값이 따라오거나 남지 않고 다음 질문으로 넘어갈 수 있는 방법이라고 생각했다.

맵핑한 코드

  const renderByCurrentQuestion = currentQuestionIdx => {
    const questionMapper = {
      0: (
        <Radio
          radioValue={radioValue}
          question={questionOne}
          getRadioValue={getRadioValue}
        />
      ),
      1: (
        <Radio
          radioValue={radioValue}
          question={questionTwo}
          getRadioValue={getRadioValue}
        />
      ),
      2: (
        <Radio
          radioValue={radioValue}
          question={questionThree}
          getRadioValue={getRadioValue}
        />
      ),
      3: <Select SelectData={SelectData} getSelectValue={getSelectValue} />,
    };

    return (
      <S.SurveyLine>
        <S.RadioBox>{questionMapper[currentQuestionIdx]}</S.RadioBox>
      </S.SurveyLine>
    );
  };

그래서 아예 객체로 이 코드들을 다 저장해 놓고 return 값으로 컴포넌트를 뱉어주며 그 안에 값이 함수의 인자로 받는 값에 따라 변경되도록 구성했다.

그리고 이 컴포넌트가 들어가야하는 곳에 함수를 선언해준다.

{renderByCurrentQuestion(currentQ)}

이런식으로 사용해주면 함수에 내가 설정해놓은 currentQ 라는 숫자가 바뀔때마다 다른 컴포넌트가 return 되게 된다.

이 방법은 내게 크나큰 충격?을 줬다. 신선했다. 역시 사용방법은 무궁무진하고 나는 너무 부족함을 많이 느낀다.
많이 배운 하루다 ! 감사하다 !