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

유진·2023년 3월 2일

TIL Today I Learned

목록 보기

86/116

2023.03.02.(목)

TIL Today I Learned
해당 깃허브

Good: 리코일을 계속 공부했다. 처음부터 리코일 틀을 잡고 했다면 두 번 일을 안 했을텐데 아쉬웠다.
Bad: 리코일이 어렵기 보다는 머리가 복잡했다. 처음부터 시작하는 것이 아닌 이미 구현이 된 것을 퍼즐 조각처럼 맞추는 느낌이었다.

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

로그인, 회원가입, 비밀번호 찾기 모달창을 3 ~ 4개 이용을 했다. 전역에서 관리하고자 한다.
ModalAuth.tsx = 메인페이지에서 로그인 버튼을 눌러서 모달창이 열리는 곳
Auth.tsx = 로그인 하는 곳
AuthSignUp.tsx = 회원가입 하는 곳
AuthForgot.tsx = 비밀번호 찾는 곳

//ModalAuth 전
 return (
    <ModalStyled onClick={closeLoginModal}>
      {forgotModal ? (
        <AuthForgot forgotModalButton={forgotModalButton} />
      ) : signUpModal ? (
        <AuthSignUp
          changeModalButton={changeModalButton}
          closeLoginModal={closeLoginModal}
        />
      ) : (
        <Auth
          closeLoginModal={closeLoginModal}
          forgotModalButton={forgotModalButton}
          changeModalButton={changeModalButton}
        />
      )}
    </ModalStyled>
  );

//ModalAuth 후
불필요하여 삭제

//Auth 전
interface Props {
  closeLoginModal: () => void;
  changeModalButton: () => void;
  forgotModalButton: () => void;
}
return(
     <PwForgotContainer onClick={props.forgotModalButton}>
        <LoginCheckSignDiv>아이디/패스워드를 잊으셨나요?</LoginCheckSignDiv>
      </PwForgotContainer>

      <LoginGoogleContainer>
        <AuthSocial closeModal={props.closeLoginModal} />
      </LoginGoogleContainer>

      <LoginCheckContainer onClick={props.changeModalButton}>
        <LoginCheckSignDiv>회원가입 하기</LoginCheckSignDiv>
      </LoginCheckContainer>
      )

//Auth 후 (ModalAuth에서 하던 작업을 여기서 함.)
  const [signUpModal, setSignUpModal] = useRecoilState(signUpModalAtom);
  const [forgotModal, setForgotModal] = useRecoilState(forgotModalAtom);
  const [closeLoginModal, setCloseLoginModal] = useRecoilState(loginModalAtom);
  
  return(
        <PwForgotContainer
        onClick={() => {
          setCloseLoginModal(!closeLoginModal);
          setForgotModal(!forgotModal);
        }}
      >
        <LoginCheckSignDiv>아이디/패스워드를 잊으셨나요?</LoginCheckSignDiv>
      </PwForgotContainer>

      <LoginGoogleContainer>
        <AuthSocial
          closeModal={() => {
            setCloseLoginModal(!closeLoginModal);
          }}
        />
      </LoginGoogleContainer>

      <LoginCheckContainer
        onClick={() => {
          setCloseLoginModal(!closeLoginModal);
          setSignUpModal(!signUpModal);
        }}
      >
        <LoginCheckSignDiv>회원가입 하기</LoginCheckSignDiv>
      </LoginCheckContainer>
      )

//AuthSignUp 전
interface Props {
  // changeModalButton: () => void;
  // closeLoginModal: () => void;
}
      <StHeder onClick={props.changeModalButton}> 〈 돌아가기 </StHeder>
      
      
//AuthSignUp 후
  const [signUpModal, setSignUpModal] = useRecoilState(signUpModalAtom);
  const [forgotModal, setForgotModal] = useRecoilState(forgotModalAtom);
  const [closeLoginModal, setCloseLoginModal] = useRecoilState(loginModalAtom);
  
       <StHeder
        onClick={() => {
          setCloseLoginModal(!closeLoginModal);
          setSignUpModal(!signUpModal);
        }}
      >
        {' '}
        〈 돌아가기{' '}
      </StHeder>

//AuthForgot 전
interface Props {
  forgotModalButton: () => void;
}
return(
          <LoginReturnButton onClick={props.forgotModalButton}>
            로그인하러 가기
          </LoginReturnButton>
)


//AuthForgot 후
return(
          <LoginReturnButton
            onClick={() => {
              setCloseLoginModal(!closeLoginModal);
              setForgotModal(!forgotModal);
            }}
          >
            로그인하러 가기
          </LoginReturnButton>
)

[공부1]

리코일을 사용하는 이유

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

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