2024.02.23 TIL #객체의 구조분해 할당

오늘은 아주 기본적인 실수를 범했다.

  const profile = useSelector((state) => state.profileSlice.profile);

  console.log(profile.nickname);

 

  const { profileNickname } = useSelector(

    (state) => state.profileSlice.profile

  );

  console.log(profileNickname);

 

profile이라는 객체에서 nickname이라는 key를 가진 value를 꺼내고 싶었는데, 내가 원하는 이름으로 꺼내고 싶었다.

그러나? 실패.

왜냐면 애초에 객체의 구조분해할당이라는 것은 객체의 key에 그 value 값을 할당해주는 것이기 때문에, 할당을 할 때, 객체의 key는 건드리지 않은 채 할당을 해야한다.

이렇게 해야 내가 원하는 할당이 성공적으로 이루어진다.

  const profile = useSelector((state) => state.profileSlice.profile);

  console.log(profile.nickname);

또는

  const { nickname } = useSelector((state) => state.profileSlice.profile);

  console.log(nickname);

또

  const { nickname: profileNickname } = useSelector((state) => state.profileSlice.profile);

  console.log(profileNickname);

 

즉, 없는 Key로 구조분해할당을 할 수 없다는 말이다.

---

새롭게 알게된 객체 만들기 방법이 있다.

  const {data} = await axios.patch(~~~, 바꾸려는 내용)

  const {nickname, avatar} = data

  const editingObj = {};

  if (nickname) editngObj.nickname = nickname;

  if (id) editingObj.avatar = avartar

 

editingObj라는 빈 객체를 만들고, 그 객체에 nickname과 avatar라는 key를 만들어서 바로 value를 할당하는 방식이다.

---

img태그를 눌렀을 때 파일선택이 실행되었으면 좋겠다면?

=> <lable> 태그로 <input type="file>과 <img> 태그를  감싸주고 input 태그 css display: none

---

input 태그 안에 원하는 파일만 넣을 수 있는 방법

=> <input accept="image/*" 또는 ".jpg, .png" /> 이런식으로 하면 된다.