[React]axios로 받은 데이터 값에 따라 input checkbox checked 값 다르게 주기

😎 axios로 받은 데이터 값에 따라 input checkbox checked 값 다르게 주기

서버에서 주는 데이터

viewYn의 값에 따라 브라우저상에 보여지는 input checkbox의 checked의 값을 다르게 줄 것이다.

  //'숨기기' 버튼
  const [hideBtn, setHideBtn] = useState(true);

  useEffect(() => {
    const getData = async () => {
        await axios({
          method: 'get',
          url: `${process.env.REACT_APP_API_URL}/admin/item/${state.data}`,
        }).then((res) => {
          // viewYn의 값에 따라 N일 경우 setHidBtn에 false값을
          // Y일경우 setHideBtn에 true값을 넣어준다.
          setHideBtn(res.data.viewYn === 'N' ? false : true);
        });
      } 
    };
    getData();
  }, [state.data]);

  //숨기기 버튼
  const clickHide = () => {
    setHideBtn(!hideBtn);
  };

브라우저 상에 보여지는 것

                    {hideBtn === false ? (
                      <S.StyledInput
                        defaultChecked
                        onClick={clickHide}
                        type='checkbox'
                        id='Hide'
                        name='Hide'
                      />
                    ) : (
                      <S.StyledInput onClick={clickHide}
type='checkbox' id='Hide' name='Hide' />
                    )}

                    <S.StyledLabel htmlFor='Hide'>
                      <S.StyledP>숨기기</S.StyledP>
                    </S.StyledLabel>

styled-component

//체크박스
export const StyledLabel = styled.label`
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  cursor: default;

  &:before {
    display: block;
    content: '';
    height: 0.2rem;
    width: 0.2rem;
    background-color: white;
    border: 0.02rem solid gainsboro;
    border-radius: 0.5rem;
  }

  &:after {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: block;
    opacity: 0;
    content: '';
    height: 0.2rem;
    width: 0.2rem;
    border: 0.02rem solid transparent;
    border-radius: 0.5rem;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: ${({ theme }) => theme.palette.txtgray};
  }
`;

export const StyledInput = styled.input`
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 0.01rem;
  overflow: hidden;
  white-space: nowrap;
  width: 0.01rem;

  &:checked + ${StyledLabel} {
    :after {
      opacity: 1;
    }
  }
`;

export const StyledP = styled.p`
  margin-left: 0.05rem;
  color: ${({ theme }) => theme.palette.txtgray};
  font-size: 0.2rem;
`;

🤔checked의 boolen값을 서버에 보내야 한다.

  // 수정 api
  const modifyApi = async () => {
      await axios({
        method: 'put',
        url: `${process.env.REACT_APP_API_URL}/admin/item/${itemId}`,
        data: {
          //hideBtn의 값이 false이면 N을 보내고
          //hideBtn의 값이 true이면 Y의 값을 보낸다.
          viewYn: hideBtn === false ? 'N' : 'Y',
        },
      })
  };