의류 쇼핑몰 24 | Context 1 | 쓰는 이유

sign-in 할 때 user object를 왜 킵해야 할까?

profile 페이지에서 회원 정보 수정하거나

유저의 return 페이지나 history 페이지를 보려면 

user object가 필요하다. 

 

 

그럼 어떻게 sign-in, sign-up에 있는 user data를

떠서 다른 페이지에서 사용할 수 있을까?

 

user data를 다른 컴포넌트에서 사용하는 방법은 2가지가 있다. 

1. props drilling - 안씀

2. Context - 이 거씀

 

 

리액트 컴포넌트를 생각해 보자. 

컴포넌트 트리에서 user data를 받는 페이지는 sign-in과 sign-up 페이지이다.

이 user data를 사용하는 페이지는 user profile, returns, history에서

user data가 필요하다.

 

 

Props drilling 

첫번째는 props drilling 방법으로 

user data는 sign-in, sign-up에서 App 까지 올려 보낸 후 

App에서 다시 다른 컴포넌트로 props를 이동 시키는 방식이다. 

 

user data를 받거나 또는 쓰는 컴포넌트들이 공동으로 엮여있는

최상위 부모 컴포넌트인 App 컴포넌트까지 가서 다시 분배를 한다.  

 

sign-in 이나 Auth에서는 불가능하다. 

props는 parents --> children 방향으로만 가기 때문이다. 

 

 

 

파란색 원형에 든 페이지는 user data가 필요하지 않다.

user data가 필요한 곳까지 갈 때 길을 연결해주는

intermediary components로 Traffic node nodule(뿌리혹) 역할을 한다. 

 

이 방식은 여러 단계를 거쳐 가기에 과정이 지루하고 코드가 복잡해진다. 

 

 

 

Context 

두 번째 방법은 Context 방식이다.

외부 저장소에 user data를 저장해 놓고 어디든 원하는 컴포넌트에

다이렉트로 쏴주는 방식이 있다. 

이 방법이 간단하여 많이 사용된다. 

 

 

 

그럼 이제 context 방법을 실행해 보자.