• 카테고리

    질문 & 답변
  • 세부 분야

    풀스택

  • 해결 여부

    해결됨

[회원가입&로그인] - 유저정보 Context에 담아주기

22.11.27 20:16 작성 조회수 561

0

  1. 이전 프로젝트에서 react-redux 를 주로 사용했었는데,
    Context API 와 무슨 차이가 있을까요 ? Context 의 목적이 상태관리가 아닌 것은 알겠는데,,, 아직 공부를 더 해야겠네요ㅠㅎㅎ

  2. AuthProvider 에서 파라미터 쪽에 {children} : {children : React.ReactNode} 이건 어떤 식으로 쓰인 문법인지 어디서 찾아볼 수 있을까요??

 

 

답변 1

답변을 작성해보세요.

1

안녕하세요

image
리액트 Context는 data를 여러 컴포넌트에서 사용하기 쉽게 만들어줍니다.
결국 Redux와 같은 역할을 합니다.
그러기에 요즘은 Redux 대신에 많이 사용합니다. 또한 Context는 따로 설치해주지 않아도 사용할수 있는 차이점이 있습니다.
이외에도 Mobx, Zustand, Recoil등 많은 대체제가 있습니다.

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {


이 부분을 좀 더 간단하게 나타내 보면
const AuthProvider = (props) => {}
이렇게 됩니다.
props 객체 안에 children이 있는 것입니다.
그럼 이 children은 AuthProvier 컴포넌트로 감싸준 부분입니다.

<AuthProvider>
          {!authRoute && <Navbar />}
          <div className={authRoute ? "" : "pt-16"}>
            <Component {...pageProps} />
          </div>
</AuthProvider>


이렇게 감싸준 자식 컴포넌트들입니다.
감사합니다.

이원영님의 프로필

이원영

질문자

2022.12.04

친절한 답변 감사합니다. 덕분에 너무 쉽게 이해한 것 같아 감사드려요!!