[React] input type = 'radio', 'checkbox'의 상태관리

Today, What I learned?

라디오 버튼과 체크박스의 상태 유지를 위한 고민의 과정을 기록해 본다!..

단순히 값을 넣어 state를 변경해 주는 것이 아니라, 이전 상태 스냅샷을 이용해서 state를 변경하는 로직을 써보게 되어 좋았다.

 

첫 번째 시도

라디오 버튼

  const [isJuniorChecked, setIsJuniorChecked] = useState<boolean>(
    user?.isJunior,
  );
  const [checkedPositions, setCheckedPositions] = useState<string[]>(
    user?.positions,
  );

 

라디오 버튼에 들어갈 onChange 이벤트.

const handleCheckedRadioChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      setIsJuniorChecked(e.target.id === 'isJunior' ? true : false);
    },
    [],
  );

 

기존 라디오 버튼에 이벤트 핸들러를 넣어주면 클릭할 때마다 state가 변경된다.

  <>
      {juniorFlag ? (
        <InfoRadioBoxInput
          type="radio"
          id={id}
          name="isJunior"
          defaultValue={value}
          defaultChecked
          onChange={onChange}
        />
      ) : (
        <InfoRadioBoxInput
          type="radio"
          id={id}
          defaultValue={value}
          name="isJunior"
          onChange={onChange}
        />
      )}

      <InfoRadioBoxLabel htmlFor={id}>
        <InfocCheckBoxSpan>{value}</InfocCheckBoxSpan>
      </InfoRadioBoxLabel>
    </>

 

 

체크박스

체크박스 핸들러는 클릭 여부에 따라 기존 상태에 포함되어 있었다면 빼줘야 하고 없으면 넣어줘야 하기 때문에 조금 복잡하다.
이전 state의 스냅샷을 가져와서 필터링해주는 방식이다. 인풋 태그에 onChange 이벤트 걸어주는 방식은 동일하다.

  const handleCheckedPositionsChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const { value, checked } = e.target;

      if (checked) {
        setCheckedPositions((prev) => [...prev, value]);
      } else {
        // 체크 해제된 값 필터링하기
        setCheckedPositions((prev) =>
          prev.filter((position) => position !== value),
        );
      }
    },
    [],
  );

 

일단 일반적인 경우는 이렇게 해결할 수 있을 것 같다.

 

하지만 이러고 보니 ... 👀
마이페이지 안에서 관리해야 하는 state 개수가 너무 늘어난다는 단점이 있었다.
현재 마이페이지에서는 닉네임, 프로필, 경력 등등 5개 이상의 유저 정보 State가 있는데!...

그래서 상태를 하나로 관리해 보기로 했다.

 

 

두 번째

userInfo 라는 전체 state를 하나 만들어 주었다.

 const [userInfo, setUserInfo] = useState<UserInfo>(initialUserInfo);

 

이 state는 초기값으로 아래와 같은 값들을 가진다.

const initialUserInfo = {
  displayName: '',
  photoURL: '',
  isJunior: false,
  positions: [],
  plannerStack: [],
  designerStack: [],
  developerStack: [],
};

 

라디오 버튼

라디오 버튼 상태 핸들러는 이전과 비슷하다.
이 전의 state 스냅샷을 가져오고, 라디오 버튼에 해당하는 키값만 따로 수정해 준다.

const handleCheckedRadioChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const { id } = e.currentTarget;

      setUserInfo((prevState) => {
        return {
          ...prevState,
          isJunior: id === 'junior' ? true : false,
        };
      });

      handleButtonActive();
    },
    [],
  );

 

 

체크 박스

체크박스도 거의 비슷하게, 이전 상태 스냅샷을 가져오고 해당 키값을 콕 집어서 상태를 변경해 준다.

 const handleCheckedPositionsChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      handleButtonActive();
      const { value, checked } = e.target;

      if (checked) {
        setUserInfo((prevState) => {
          return {
            ...prevState,
            positions: [...prevState.positions, value],
          };
        });
      } else {
        // 체크 해제된 값 필터링하기
        setUserInfo((prevState) => {
          return {
            ...prevState,
            positions: prevState.positions.filter(
              (position) => position !== value,
            ),
          };
        });
      }
    },
    [],
  );

 

 

 

이 외에 기술 스택 선택 부분에 있어서 난항을 겪고 있긴 하지만.. 😂
이건 추후에 글을 작성해 보아야겠다.