useState의 쓸모를 알았도다.

• 입력 시 변경되는 값을 동시에 화면에 반영하면서 저장하기 위해서는 useState를 써야함.
  1) 변경값 동시 화면 반영
  2) 변경값 동시 저장

만약 useState를 사용하지 않으면?

• 화면에 즉각즉각 내가 사용하는 변수가 반영이 안된다

어떤 경우가 있었는가?

• useSelector에 맛들려서 바로바로 변경되어야하는 값들을 redux의 set어쩌구로 구상한 다음에 set어쩌구 함수를 불러와서 변경하려하였다. 그렇게 되면 물론 저장은 되겠지만, 연속적으로 저장할 수 없다. 비연속적으로 저장할 수 있다.
  : 즉 dkssud을 저장하려면 d -> dk -> dks -> dkss -> dkssu -> dkssud
  : 이렇게 6번을 끊어써야했다는 슬픈사실..
• 연속성있게 바로바로 저장하려면 변경하려는 작성하고 있는 파일 내에서 useState를 써서 변경한 후, redux에 변경된 최종값을 저장하는 함수를 만드는 것이 현명~
• useState를 이용해야만 연속성있게 타자를 칠 수 있다! 잊지말기

예시를 보자

  //비밀번호변경 모달
  const PasswordModalContent = () => {
    const [currentPassword, setCurrentPassword] = useState('');
    const [newPassword, setNewPassword] = useState('');
    const [confirmNewPassword, setConfirmNewPassword] = useState('');

    //비밀번호 변경
    const changePassword = async () => {
      try {
        // 현재 비밀번호 확인
        const response = await axios.patch(
          `${APIURL}/members/password`,
          { currentPassword: currentPassword, newPassword: newPassword },
          {
            headers: {
              Authorization: accessToken,
              'Refresh-Token': refreshToken,
            },
          },
        );

        console.log(currentPassword, newPassword);

        if (response.status === 200) {
          alert('비밀번호가 성공적으로 변경되었습니다.');
        }
      } catch (error) {
        console.log(error);
      }
    };

    const inputRef = useRef<HTMLInputElement | null>(null);

    useEffect(() => {
      if (inputRef.current) {
        inputRef.current.focus();
      }
    });

    return (
      <ModalContentContainer>
        <h2>비밀번호 변경</h2>

        <div>
          <PasswordTitle>
            <label htmlFor="current-password">현재 비밀번호</label>
          </PasswordTitle>
          <PasswordInput
            type="password"
            id="current-password"
            value={currentPassword}
            onChange={e => setCurrentPassword(e.target.value)}
            placeholder="현재 비밀번호 입력"
          />
        </div>

        <div>
          <PasswordTitle>
            <label htmlFor="new-password">새로운 비밀번호</label>
          </PasswordTitle>
          <PasswordInput
            type="password"
            id="new-password"
            value={newPassword}
            onChange={e => setNewPassword(e.target.value)}
            placeholder="새로운 비밀번호 입력"
          />
        </div>

        <div>
          <PasswordTitle>
            <label htmlFor="confirm-new-password">새로운 비밀번호 확인</label>
          </PasswordTitle>
          <PasswordInput
            type="password"
            id="confirm-new-password"
            value={confirmNewPassword}
            onChange={e => setConfirmNewPassword(e.target.value)}
            placeholder="새로운 비밀번호 재입력"
          />
        </div>

        <PasswordContainer>
          {/* authtype google이면 안 보이게 */}
          <PasswordButton
            className="buttontop"
            onClick={changePassword}
            style={{ backgroundColor: '#7791BB', color: '#ffffff' }}>
            비밀번호 변경하기
          </PasswordButton>

          <PasswordButton
            onClick={() => {
              setModalOpen(false);
              setCurrentPassword('');
              setNewPassword('');
              setConfirmNewPassword('');
            }}
            style={{ backgroundColor: '#5A5A5A', color: '#ffffff' }}>
            닫기
          </PasswordButton>
        </PasswordContainer>
      </ModalContentContainer>
    );
  };