[회원가입&로그인] - 유저정보 Context에 담아주기
이전 프로젝트에서 react-redux 를 주로 사용했었는데,
Context API 와 무슨 차이가 있을까요 ? Context 의 목적이 상태관리가 아닌 것은 알겠는데,,, 아직 공부를 더 해야겠네요ㅠㅎㅎAuthProvider 에서 파라미터 쪽에 {children} : {children : React.ReactNode} 이건 어떤 식으로 쓰인 문법인지 어디서 찾아볼 수 있을까요??
답변 1
1
안녕하세요 
리액트 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>
이렇게 감싸준 자식 컴포넌트들입니다.
감사합니다.
toJson을 추가하면 [sub].tsx에서 sub를 받아오지 못합니다.
0
122
2
쿠키 저장이 되지 않습니다.
0
226
1
AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', (2)
0
582
1
AxiosError {message: 'Request failed with status code 401/500', name: 'AxiosError', code: 'ERR_BAD_RESPONSE',
0
651
1
overload 에러
0
170
1
docker compose up 오류
0
210
1
부록) remark 강의 중 parmas 오류
0
140
1
3000번은 잘 들어가지는데 80번은 안됩니다.
1
296
0
커뮤니티를 올리고 난 후 404 page
0
209
1
tailwind css 문제인지, className 에 적용한 css가 적용되지 않아요.
0
1043
2
tsx 수정 시 마다 빌드 후 서버 시작 해야하나요?
0
656
2
useState 쳤을 때 자동완성 되는 단축키 무엇인가요? extention 인가요?
0
805
2
리액트 서버 npm run dev 와 npm run build 후 npm start 의 차이
0
4616
2
data 폴더가 생성되지 않아요.
0
527
1
docker-compose up 오류
0
814
1
회원 가입 페이지 기능 생성(3) 중 에러
0
380
2
Entity에 toJSON 코드 입력 후 404 에러
0
252
1
context에서 useEffect 선언 부분 질문 있어요.
0
297
1
src 폴더구조
0
511
2
서버 실행 시 에러 관련하여 답변받고 1차 조치했는데 여전하여서 질문 남깁니다
0
298
1
엔티티 모두 작성 후 서버 실행 시 에러가 발생합니다
0
313
1
회원가입 누르면 404에러가 뜹니다 ;-;
1
425
1
nextjs버젼에 대해서 질문드립니다.
0
374
1
<npm run dev>시 -61 에러가 나타납니다!
0
360
1