[TIL] TypeScript 객체 프로퍼티 접근

객체 접근 방법

TS + React + Recoil 환경의 개발을 진행하던 중, 기본적인 문제에 부딪혀 한번 짚고넘어가기 위해 글을 작성한다.

👀오류발생하는 부분을 확인해보자

• RecoilState 정의하는 atom.tsx

//recoil state 생성
export interface UserTypes {
  memberName: string;
  memberPhone: string;
  memberPassword: string;
}


export const userState = atom<UserTypes>({
  key: "user",
  default: {
    memberName: "",
    memberPhone: "",
    memberPassword: "",
  },
});

• SignUpForm.tsx

const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const {
      target: { name, value },
    } = e;

 	 // 비밀번호
  	if (name === "password") {
      setMemberPassword((prevUser) => ({
        ...prevUser,
        memberPassword: value,
      }));
    }
  
	// 비밀번호 확인
    if (name === "password_confirm") {
      setMemberPasswordConfirm(value);

      if (value?.length < 8) {
        setError("비밀번호는 8자리 이상으로 입력해주세요.");
      } else if (value !== memberPassword) {
        setError("비밀번호가 일치하지 않습니다.");
      } else {
        setError("");
      }
    }
  };

여기서 문제가 발생한 부분은 바로 memberPasswordConfirm가 memberPassword와 일치하는지 확인하는 부분이다.

value !== memberPassword
//Error: 'string'이(가) 'UserTypes'과(와) 겹치지 않으므로 이 비교는 의도하지 않은 것 같습니다.`

💥오류내용: 사용자가 회원가입하기 위해 입력하는 value 값은 string 타입인데, memberPassword는 UserTypes타입으로 인식하기 때문에 두 값의 타입이 맞지 않아 비교할 수 없음을 의미한다.

---

💡제대로 객체의 프로퍼티에 접근하자

✅해결방법: memberPassword로 되어있는 부분을, memberPassword.memberPassword로 수정해주면 된다.

• memberPassword: UserTypes의 객체 전체를 의미
• memberPassword.memberPassword: UserTypes 객체에서 memberPassword 필드에 해당하는 값을 의미 (실제 password 값)

정확히 확인해보기 위해 콘솔값을 띄워보았다.

if (name === "password") {
	setMemberPassword((prevUser) => ({
   	...prevUser,
    memberPassword: value,
	}));
	console.log(memberPassword); // 콘솔확인
}

만약 memberPassword변수가 memberPassword의 값만을 나타낸다면, 콘솔엔 비밀번호값만 떠야 맞지만, 객체를 나타낸다면, memberName과 memberPhone값을 나타낼것이다.

👀Console 확인

• memberPassword 확인 -> 객체 전체의 값이 나타남
  

• memberPassword.memberPassword 확인 -> password값만 나타남