[TypeScript] 버튼 활용 (기능추가)

const buttonHandler = (key: string) => (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  const buttonKey = key; // 클릭된 버튼의 키를 가져옵니다.

  setClickedButton(prev => {
    const newClickedButton = { ...prev }; // 이전 클릭된 버튼 상태를 복사합니다.

    if (!newClickedButton[pageNum - 1]) {
      newClickedButton[pageNum - 1] = []; // 만약 해당 페이지의 클릭된 버튼 상태가 없다면 초기화합니다.
    }

    if (newClickedButton[pageNum - 1].includes(buttonKey)) {
      // 버튼이 이미 클릭되어 있으면, 클릭 상태를 해제합니다.
      newClickedButton[pageNum - 1] = newClickedButton[pageNum - 1].filter(button => button !== buttonKey);
    } else {
      if (maxSelectLimit && newClickedButton[pageNum - 1].length < maxSelectLimit) {
        // 새로운 버튼이 클릭될 때, 최대 선택 제한(maxSelectLimit)을 확인합니다.
        newClickedButton[pageNum - 1].push(buttonKey); // 버튼을 클릭된 목록에 추가합니다.
      } else {
        // 최대 선택 제한을 넘을 경우, 가장 오래된(맨 처음) 버튼 클릭 상태를 해제하고 새로운 버튼을 추가합니다.
        newClickedButton[pageNum - 1].shift();
        newClickedButton[pageNum - 1].push(buttonKey);
      }
    }

    setSurveyData(newClickedButton); // 새로운 클릭된 버튼 상태를 저장합니다.
    return newClickedButton; // 업데이트된 클릭된 버튼 상태를 반환합니다.
  });
};

const buttonHandler = (key: string) => (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    const buttonkey = key;

    if (buttonkey === '8') { // 'None' 버튼이 클릭되었을 때
      setClickedButton({}); // clickedButton을 초기화하여 빈 객체로 설정합니다.
      return;
    }

ㄴㄴ

 const buttonHandler =
    (key: string) =>
    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
      setClickedButton(prev => {
        const newClickedButton = { ...prev };
        if (!newClickedButton[pageNum - 1]) {
          newClickedButton[pageNum - 1] = [];
        }

        if (key === '8') {
          if (newClickedButton[pageNum - 1].includes(key)) {
            newClickedButton[pageNum - 1] = newClickedButton[
              pageNum - 1
            ].filter(button => button !== key);
          } else {
            newClickedButton[pageNum - 1] = [key];
          }
        } else {
          if (newClickedButton[pageNum - 1].includes(key)) {
            newClickedButton[pageNum - 1] = newClickedButton[
              pageNum - 1
            ].filter(button => button !== key);
          } else {
            if (
              maxSelectLimit &&
              newClickedButton[pageNum - 1].length < maxSelectLimit
            ) {
              newClickedButton[pageNum - 1].push(key);
            } else {
              newClickedButton[pageNum - 1].shift();
              newClickedButton[pageNum - 1].push(key);
            }
          }
        }

        setSurveyData(newClickedButton);
        return newClickedButton;
      });
    };

'8'을 눌렀을때, 모두 초기화 및 배열에 '8' 넣기 + 다른 버튼들과 같이 

 

1. buttonHandler 함수는 key와 event 두 개의 인자를 받습니다. 이 함수는 React.MouseEvent<HTMLButtonElement, MouseEvent> 타입의 클릭 이벤트를 처리합니다.
2. setClickedButton 함수 내부에 콜백 함수를 사용하여 현재의 클릭된 버튼 상태를 이전 상태 (prev)를 토대로 업데이트합니다.
3. newClickedButton 객체는 이전 버튼 상태를 복사한 것입니다. prev 상태는 변경되지 않도록 이전 상태의 복사본을 사용합니다.
4. 먼저 None 버튼을 누른 경우를 처리합니다. 버튼이 None인 경우 해당 버튼이 이미 클릭된 상태인지 확인하고, 클릭된 상태라면 해당 버튼을 배열에서 제거합니다. 클릭된 상태가 아니라면 None 버튼을 배열에 추가합니다.
5. 그 외의 버튼인 경우 (즉, None 버튼이 아닌 버튼), 해당 버튼이 이미 클릭된 상태인지 확인하고, 클릭된 상태라면 해당 버튼을 배열에서 제거합니다. 클릭된 상태가 아니라면 해당 버튼을 배열에 추가합니다.
6. 버튼의 최대 선택 제한 수가 설정되어 있는 경우, 이 제한에 맞춰 버튼을 추가합니다. 제한에 도달하면 첫 번째로 클릭된 버튼을 제거하고 새로운 버튼을 추가합니다.
7. setSurveyData 함수를 사용하여 변경된 버튼 상태를 로컬 저장소에 저장합니다.
8. 최종적으로 업데이트된 버튼 상태를 반환합니다

const buttonHandler = (key: string) => (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
  setClickedButton(prev => {
    // 현재 클릭된 버튼 상태를 복사한 새로운 객체
    const newClickedButton = { ...prev };

    // 현재 페이지에 대한 클릭된 버튼 배열이 없는 경우, 초기화
    if (!newClickedButton[pageNum - 1]) {
      newClickedButton[pageNum - 1] = [];
    }

    // 'None' 버튼을 클릭한 경우
    if (key === '8') {
      if (newClickedButton[pageNum - 1].includes(key)) {
        // 'None' 버튼이 클릭되어 있다면 배열에서 제거
        newClickedButton[pageNum - 1] = newClickedButton[pageNum - 1].filter(button => button !== key);
      } else {
        // 'None' 버튼이 클릭되어 있지 않다면 'None' 버튼을 배열에 추가
        newClickedButton[pageNum - 1] = [key];
      }
    } else {
      // 다른 버튼을 클릭한 경우
      if (newClickedButton[pageNum - 1].includes(key)) {
        // 클릭된 버튼 배열에서 해당 버튼을 제거
        newClickedButton[pageNum - 1] = newClickedButton[pageNum - 1].filter(button => button !== key);
      } else {
        // 해당 버튼을 배열에 추가
        if (maxSelectLimit && newClickedButton[pageNum - 1].length < maxSelectLimit) {
          // 최대 선택 제한 수가 정해져 있을 때
          newClickedButton[pageNum - 1].push(key);
        } else {
          // 최대 선택 제한에 도달했을 때, 첫 번째로 클릭된 버튼을 제거하고 새로운 버튼을 추가
          newClickedButton[pageNum - 1].shift();
          newClickedButton[pageNum - 1].push(key);
        }
      }
    }

    // 변경된 클릭된 버튼 상태를 로컬 저장소에 저장
    setSurveyData(newClickedButton);
    return newClickedButton; // 최종적으로 업데이트된 버튼 상태를 반환
  });
};