[TIL] 2022년 02월 15일 - withAuth와 SessionStorage / Cookie

이번시간에는 로그인을 구현할떄 기록하는 Stoarge / Cokie의 관해서 배웠다.

 

쿠키란?

인터넷에 사용자가 어떤한 웹사이트를 방문한다면 그 사이트가 사용하는 서버를 통해 인터넷 사용자의 컴퓨터에 

설치되는 작은 기록 정보 파일을 말한다.

 

이전에 배운 refeshToken도 쿠키쪽에 저장해주는 방식이다.

localStorage는 영구 저장 브라우저를 종료해도 살아있다.

 

sessionStorage는 브라우저가 종료되는 즉시 사라진다.

 

프론트엔드는 화면을 미리 그려보고 브라우저로 보내주는데 그냥 그대로 보내주는 것이 아닌 프론트와 브라우저에서

그려준 것을 비교 diffing을 한 다음 최종적으로 반영해주는 하이드레이션이라 부른다.

 

그래서 localStorage에서 정의되지 않았다고 나온다.

 

HOC

HOC란 리액트 컴포넌트를 Argument로 받아 새로운 리액트 컴포넌트를 리턴해주는 함수이다.

// Aaa가 실행되고 bbb가 실행
export default function Aaa() {
  return <>{Bbb({qqq: "철수"})}</>;
}

export default function Bbb(props) {
  return <div>이름은 {props.qqq}입니다 </div>
}

만약 Aaa라는 function에 BBB를 넣어주고 qqq에 철수를 넣고 Bbb에 props로 넣어준다면 실행될때는 Aaa가 먼저 

실행되고 Bbb가 그 다음에 실행되는 방식이다.

 

export default function Hoc(Component) {
  return function (props) {
   return <Component {..props} />;
}
}

HOC를 사용하는 방법은 Component를 인자로 받아 function에 props로 Component에 넘겨주는 것이다.

export default HOC(component) {
}

const Hoc = (Component) => (props) => {
   
// 쓰기 
  return <Component {...props} />

export default Hoc
}

Hoc 컴포넌트에 인자로 받고 props로 컴포넌트안에 props를 쓰면 된다.

        <GlobalContext.Provider value={value}>
            <ApolloProvider client={client}>
                <Global styles={globalStyles} />
                {/* <Layout> */}
                <Component {...pageProps} />
                {/* login sucessapge 먼저실행하고 실행됨 */}
                <>{withAuth(LoginSucessPage)({ ...pageProps })}</>
                {/* </Layout> */}
            </ApolloProvider>
        </GlobalContext.Provider>

App.tsx에서 withAuth를 사용해 로그인시 넘어가게 해주는 withAuth를 만들어준다. 

그렇다면 로그인 완료시 페이지가 보이게 된다

.