🍡 마이페이지 - 내정보에 currentUser 정보 출력하기
- 현재는 더미데이터가 출력되고 있음 -> 현재 로그인한 유저의 정보 (이름, 이메일, 연락처)가 출력되도록 수정하고,
-> '수정하기' 기능 추가하여서 유저 이름, 이메일, 연락처를 수정한 값이 localStorage에 다시 반영되도록 하기.
기존코드에 예전에 만들어둔 tempInfo (더미 키)가 있어서, 더미의값만 수정되는 문제가 있었음
=> CurrentUser 의 정보를 불러오고, 만약 수정이 될때도 CurrentUser 의 정보가 변경되도록 바꿈
즉, currentUser와 tempInfo가 분리되어 있어, 수정 시 currentUser의 정보가 업데이트되지 않는 문제가 있었음.
해결하기위해 currentUser를 상태로 관리하고, 수정 시 currentUser를 직접 업데이트하도록 코드를 변경하였음.
✔️const [currentUser, setCurrentUser] = useState(null); // currentUser 상태 추가
const handleSave = () => {
// currentUser 업데이트
localStorage.setItem("currentUser", JSON.stringify(currentUser));
setIsEditing(false);
};
const handleInputChange = (field, value) => {
setCurrentUser((prev) => ({
...prev,
[field]: value,
}));};
✔️input 키, value, onChange 수정함
<input
type="tel"
value={currentUser?.phone || ""}
onChange={(e) =>handleInputChange("phone", e.target.value)
}
className="w-full p-2 border rounded-md"
/>
✔️출력 형식도 수정함
이름: {currentUser?.name}
🍡변경 사항
✔️currentUser 상태로 관리:
currentUser를 상태로 관리하여 사용자 정보를 직접 업데이트함.
handleInputChange 함수 추가:
입력 필드의 변경 사항을 currentUser 상태에 반영하기.
field와 value를 받아 동적으로 상태를 업데이트함.
handleSave 함수 수정:
수정된 currentUser 정보를 localStorage에 저장
handleCancel 함수 수정:
수정 취소 시 currentUser 상태를 그대로 유지하고, 편집 모드를 종료.
currentUser를 사용하여 화면에 정보 표시
✔️그리고 localStorage 의 users 에 있는 정보도 currentUser 가 업데이트될때 같이 업데이트 되도록 수정
users 정보도 currentUser가 업데이트될 때 함께 업데이트하려면, users 배열에서 currentUser를 찾아 업데이트한 뒤, 다시 localStorage에 저장해야함.
const handleSave = () => {
// currentUser 업데이트
localStorage.setItem("currentUser", JSON.stringify(currentUser));
// users 배열 업데이트
const users = JSON.parse(localStorage.getItem("users")) || [];
const updatedUsers = users.map((user) =>
user.id === currentUser.id ? currentUser : user
);
localStorage.setItem("users", JSON.stringify(updatedUsers));
setIsEditing(false);
};
🍡users 배열 가져오기:
localStorage에서 users 배열을 가져옴. 만약 users가 없으면 빈 배열([])을 기본값으로 사용.
✔️currentUser 업데이트:
users 배열에서 currentUser와 동일한 id를 가진 사용자를 찾아 업데이트한다.
map 메서드를 사용하여 id가 일치하는 경우 currentUser로 대체하고, 그렇지 않은 경우 기존 데이터를 유지
localStorage에 저장:
업데이트된 users 배열을 다시 localStorage에 저장하기.
currentUser 저장:
currentUser를 localStorage에 저장하여 현재 로그인한 사용자 정보도 업데이트.
setIsEditing(false)를 호출하여 편집 모드를 종료함.
