[TIL] 최종 프로젝트 4주 차_금요일

유진·2023년 3월 3일

TIL 공부

TIL Today I Learned

목록 보기

87/116

2023.03.03.(금)

TIL Today I Learned
해당 깃허브

Good: 오늘은 마이페이지 리코일을 했다. 만족한다.
Bad: 리코일하는데 하루가 꼬박 걸린 점이 문제이다.

[ 최종 프로젝트 리코일 리팩토링]

Mypage index.tsx는 마이페이지
Profile.tsx : 마이페이지에서 상단 프로필 부분
ModalProfile.tsx : 마이페이지 회원 정보 수정하는 모달 창
Layoput.tsx : 전역

//Layoput 프로필 수정 모달 창 추가
  <>
        {editProfileModal ? (
          <CustomModal
            modal={editProfileModal}
            setModal={setEditProfileModal}
            width="524"
            height="695"
            element={
              <ModalProfile
              />
            }
          />
        ) : null}
      </>

Layoput.tsx는 전역에서 사용할 수 있는 곳이다. 여기 적은 editProfileModal은 Profile.tsx and ModalProfile.tsx에서 손 쉽게 사용할 수 있었다.

// Profile.tsx 수정 전
  const [editProfileModal, setEditProfileModal] = useState(false);
  const [imgEdit, setImgEdit] = useState<string>(profileimg);
  const [nicknameEdit, setNicknameEdit] = useState<string>(
    authService?.currentUser?.displayName as string);


 // 프로필 수정 모달 창 버튼
  const editProfileModalButton = () => {
    setEditProfileModal(!editProfileModal);
    };
  
  return(
        {/* 프로필 수정 버튼 props */}
      {editProfileModal && (
        <ModalProfile
          profileEditCancle={profileEditCancle} //프로필 수정 취소
          editProfileModal={editProfileModalButton} //프로필 수정 버튼
          imgEdit={imgEdit} //기본 아이콘 사진
          setImgEdit={setImgEdit} //기본 아이콘 사진 set
          nicknameEdit={nicknameEdit} //닉네임 변경
        />
      )}
      <ProfileEdit>
        {/* 사진 */}
        <div>
          <ProfileImage img={imgEdit}></ProfileImage>
          {/* 프로필 수정 */}
          <ProfileEditBtn onClick={editProfileModalButton}>
            내 정보 변경 {'>'}
          </ProfileEditBtn>
        </div>
  )
  
  
// Profile.tsx 수정 후
import { useRecoilState } from 'recoil';
import { editProfileModalAtom } from '@/atom';

const [editProfileModal, setEditProfileModal] =
    useRecoilState(editProfileModalAtom);
    
  // 프로필 수정 모달 창 버튼
  const editProfileModalButton = () => {
    setEditProfileModal(!editProfileModal);
  };
 return(
           <ProfileEditBtn onClick={editProfileModalButton}>
            내 정보 변경 {'>'}
          </ProfileEditBtn>
 )

프로필 수정 취소, 프로필 수정 버튼, 기본 아이콘 사진, 기본 아이콘 사진 set, 닉네임 변경을 아예 다 뺐다. 이유는 프로필 수정 취소와 닉네임 변경은 모달 창에서 필요한 것이기 때문에 ModalProfile.tsx에 넣었다. 프로필 수정 버튼은 Profile.tsx 에서만 사용하기 때문에 밑에 남겼다. 기본 아이콘 사진은Profile.tsx and ModalProfile.tsx 두 개에서만 이용을 하고 있기 때문에 각각 넣었다.

//ModalProfile.tsx 수정 전
interface Props {
  profileEditCancle: () => void;
  editProfileModal: () => void;
  imgEdit: string;
  setImgEdit: Dispatch<SetStateAction<string>>;
  nicknameEdit: string;
} //props를 하지 않아 후에 삭제한 부분

function editProfileModal() {
    props.editProfileModal();
  }
  
    // 프로필 사진 삭제
  const deleteImgFile = async () => {
    await updateProfile(authService?.currentUser!, {
      displayName: props.nicknameEdit,
      photoURL: '',
    });

    props.setImgEdit(imgFile as string);
  };
  
//ModalProfile.tsx 수정 후
import { useRecoilState } from 'recoil';
import { editProfileModalAtom } from '@/atom';

const imgFile = '/profileicon.svg';

  const [editProfileModal, setEditProfileModal] =
    useRecoilState(editProfileModalAtom); //전역에서 사용 중
  const [nicknameEdit, setNicknameEdit] = useState<string>(
    authService?.currentUser?.displayName as string
  ); //Profile.tsx에서 가져옴
  const profileimg = authService?.currentUser?.photoURL ?? imgFile; //Profile.tsx에서 똑같이 사용함.
  const [imgEdit, setImgEdit] = useState<string>(profileimg); //Profile.tsx에서 삭제 후 가져옴.
 
     // 프로필 사진 삭제
  const deleteImgFile = async () => {
    await updateProfile(authService?.currentUser!, {
      displayName: nicknameEdit, //props 제거함.
      photoURL: '',
    });

    props.setImgEdit(imgFile as string);
  };
  
 // 사진만, 닉네임만, 비밀번호만 단독으로 고치는 것, 다 같이 고치는 것
    if (nicknameToggle && !pwToggle) {
      await updateProfile(authService?.currentUser!, {
        displayName: data.nickname,
        photoURL: downloadUrl ?? '',
      })
        .then((res) => {
          customAlert('프로필 수정 완료하였습니다!');
          setEditProfileModal(!editProfileModal);
        })

        .catch((error) => {
          console.log(error);
        });
    } 
    ...
    
    } else if (!nicknameToggle && !pwToggle) {
      await updateProfile(authService?.currentUser!, {
        photoURL: downloadUrl ?? '',
      })
        .then((res) => {
          customAlert('프로필 수정 완료하였습니다!');
          setEditProfileModal(!editProfileModal);
        })
        .catch((error) => {
          console.log(error);
        });
        
  return(
        // 배경화면 누르면 취소
<ModalStyled
      onClick={() => {
        setEditProfileModal(!editProfileModal);
      }}
    >
  )

Profile.tsx에서 props 해주던 것을 전부 삭제하였다. 그래서 ModalProfile.tsx로 전달해주던 props.editProfileModal props.nicknameEdit을 삭제하고 단독으로 사용하였다.
배경화면 누르면 취소하는 것은 setEditProfileModal(!editProfileModal) 간단히 사용할 수 있어서 좋다.

[공부1]

리코일을 사용하는 이유

Recoil은 React 애플리케이션에서 상태(state) 관리를 위한 라이브러리 중 하나이다. 기존에는 Redux와 MobX 등의 라이브러리가 사용되었지만, 최근에는 Recoil과 같은 새로운 라이브러리들이 등장하면서 선택의 폭이 넓어졌다. Recoil을 사용하는 이유는 다음과 같다.

간편한 구현과 사용
Recoil은 컴포넌트 간의 상태 전달과 업데이트를 간단하게 구현할 수 있다. Redux와 같은 라이브러리는 상태 업데이트를 위한 별도의 코드와 디렉토리 구조를 만들어야 하지만, Recoil은 React의 hook API를 사용하므로 상태 업데이트를 직관적으로 처리할 수 있다.