(1) 회원정보 수정 기능 - Array, Object

회원정보 수정 기능을 구현하였다.

가장 먼저 구현하고 싶은 것들을 정리해보았다.

 

1) 변경할 수 있는 값들과 변경 불가한 값 구분

변경할 수 있는 값들은 전화번호, 비밀번호, 이름 등이었고

변경할 수 없는 값들은 이메일 등이 있었다.

이는 readOnly 기능을 사용해 쉽게 구현 가능했다.

 

예시

<InputField
	label="전화번호"
	placeholder={user.phone}
	name="phone"
	value={changeUser.phone}
    onChange={changeInput}
/>
<InputField 
	label="이메일" 
    name="email" 
    placeholder={user.userEmail} 
    defaultValue={user.userEmail} 
    readOnly 
/>

✅ value vs defaultValue 차이

 

둘다 input 초기값을 설정하는 attribute이나 값을 변경하는 방식이 다르다.

속성	동작 방식	상태 관리
value	"제어 컴포넌트" → 상태(state)와 동기화됨	useState와 같은 상태 변수 필요
defaultValue	"비제어 컴포넌트" → 초기값만 설정되고 이후 변경되지 않음	상태 변수 없이 사용 가능

 

✅ readOnly와 defaultValue를 함께 사용하는 이유

초기값 설정 + 변경 막음

readOnly와 value는 상태와 동기화 되므로 변경할 수 없는 값이지만 상태와 동기화되는 값을 만들 때 사용

서버에서 업데이트 될 가능성이 있는 값이면 value를 써야함

이메일의 경우 변경되지 않는 값이므로 state와 동기화할 필요없어 defaultValue를 사용했다.

 

2) useState/useSelector를 이용한 state값 변경

이제 input을 통해 받은 값으로 user 데이터와 joinData 값들을 변경시키고자 했다.

Redux를 사용해 slice를 따로 빼 상태를 관리하였다.

코드는 사실 아주 간단하다

    modifyUser: (state, action) => {
      state.user = { ...state.user, ...action.payload };
      state.joinData = state.joinData.map((user) =>
        user.id === state.user.id ? { ...user, ...action.payload } : user
      );
      localStorage.setItem('user', JSON.stringify(state.user));
      localStorage.setItem('joinData', JSON.stringify(state.joinData));
      state.prevUser = state.user;
      localStorage.setItem('prevUser', JSON.stringify(state.prevUser));
    },

단순히 수정한 값들을 action.payload로 받아 user 상태에 넣고,

수정한 user의 데이터를 다시 joinData에 알맞게 넣어

local storage를 업데이트 하면 되는 부분이었다.

 

🚫 error

user의 state를 가져와서 뿌릴 때 .map 사용과 스프레드 연산자가 헷갈려 실수 한 부분이 있었다.

user은 { id:1, username:'가나다' ... } 로 되어있는 Object 형식의 데이터다.

따라서 map을 사용할 필요가 없고, {...item, [name]: value } 와 같은 방식으로 스프레드 연산자가 사용 가능하다.

그와 비교해 joinData는 다수의 user를 모아둔 데이터로 Array 형식의 데이터다.

[{id:1, ...}, {id: 2, ...}] 와 같은 형식을 가지고 있으며 .map 함수를 사용 할 수 있다.

이때, map 함수를 사용했을 때의 item들은 모두 Object인 것이다.

이 부분이 헷갈려 Array 데이터 처리하듯 다루다 보니 오류가 발생했던 적이 있다.

array와 object를 확실히 구분해야한다.

 

이를 통해 간단히 회원정보 수정 기능 구현 완료