인프런 커뮤니티 질문&답변
작성한 질문수
setAvatarImage(null) 부분 질문
작성
·
39
0
선생님, 안녕하세요. 강의 잘 듣고 있습니다 🙂
프로필 수정 기능구현하기 - 기능 강좌에서
useEffect(() => { if (profile && isOpen) { setNickname(profile.nickname); setBio(profile.bio); setAvatarImage(null); } }, [profile, isOpen]);setAvatarImage(null);setAvatarImage의 인수로 null 값으로 설정한 이유를 강의에서 말씀 주셨는데 설명을 들었는데도 아직 잘 이해가 안 돼서요 ㅠㅠ
해당 부분에 대해 좀 더 부연설명 해주실 수 있나요?
감사합니다. 새해 복 많이 받으세요!
답변 2
0
안녕하세요 산독기님 이정환입니다.
AI 인턴의 답변대로 setAvatarImage(null);는 프로필 수정 모달이 열릴 때 사용자 프로필을 원래의 초기 상태로 설정하려는 목적을 가지고 있습니다.
구체적인 동작과 함께 코드를 이해하시려면 해당 useEffect를 주석처리한 상태로 아래의 동작을 수행해보시길 권장드립니다.
프로필 이미지 변경
수정하기 버튼을 누르지 않고 모달 종료
모달 다시 열기
이때 useEffect가 주석처리 되어 있다면 avatarImage의 값을 현재 데이터베이스에 저장된 유저의 정보로 초기화 하지 않습니다. 따라서 프로필 이미지란에는 앞서 변경한 이미지가 나타나게 될 것 입니다.
0
안녕하세요, 인프런 AI 인턴입니다. 산독기님, 질문 주셔서 감사합니다.
주어진 코드 스니펫에서 setAvatarImage(null);는 프로필 수정 모달이 열리면서 사용자 프로필을 원래의 초기 상태로 설정하려는 의도를 가지고 있습니다. 여기서 null을 설정하는 이유와 의도는 다음과 같습니다:
상태 초기화: 프로필 수정 모달이 열릴 때, 이전에 설정되었던 이미지가 남아 있게 되면 사용자가 혼란스러울 수 있습니다. 즉, 새로운 이미지를 업로드하려는 경우에 초기 상태로 돌아가기 위해 기존의 이미지를
null로 설정함으로써 초기화하고 있음을 의미합니다.UI 업데이트:
null로 설정함으로써 프로필에서 이전에 설정된 아바타 이미지가 없어지거나, 기본 이미지로 돌아가게 됩니다. 이는 UI에서 이전 이미지를 명확하게 제거하는 데 도움이 됩니다.사용자 경험 향상: 사용자가 새로운 이미지를 설정하고자 할 때 매번 초기 상태(아무 것도 선택하지 않았던 상태)로 돌아가게 함으로써 사용자에게 명확한 선택지(무엇을 했는지에 대한)가 제공됩니다.
이를 통해 변화된 상태에 대해 명확히 하여 사용자가 프로필 수정 과정에서 혼동하지 않고, 보다 직관적인 경험을 할 수 있습니다.
관련된 질문에 답변한 유사한 질문과 답변을 아래 링크에서 확인하실 수 있습니다:
이러한 링크들이 질문자의 이해도를 높이는 데 도움이 되기를 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.