의류 쇼핑몰 25 | Context 2 | context에 데이터 입력과 출력

< 혹시 context 이해 안되면 보고 오기 - context으로 간단한 페이지에 적용시키기 (보기) >

 

 

context 파일 만들기 

언제든 유저가 sign-up, sign-in 했을 때 들어온 user 데이터를 context에 담아야 한다.

src 폴더에 context 폴더, 파일을 만든다. 

 

 

context를 만들기 위해 리액트에서 createContext 메소드를 불러온다. 

 

 

userContext의 이름으로 storage 역할을 하는 context를 만들어 export 한다. 

default value는 일단 null로 하고 뒤에서 자세히 보자.

 

 

 

이제 functional component 를 만든다. 

Provider component로 value를 쓰길 원하는 모든 컴포넌트를 감싸줘야 한다.

 

 

 

전달하고자 하는 데이터를 value 안에 넣어준다. 

UserContext로 감싸는 모든 하위 컴포넌트는 props를 사용하지 않고

value 안에 든 데이터에 접근할 수 있게 되었다. 

 

 

useState를 이용해 이 데이터들을 담는다. 

 

 

 

currentUser와 setCurrentUser 를 createContext에서 null 로 정해준다. 

 

 

 

  index.js 에서 <App /> 감싸기 

index.js로 가서 

UserProvider를 불러와  <App />을 감싸준다.

이제 <App /> 아래 있는 모든 하위 컴포넌트는 userContext 데이터에 접근할 수 있다.

 

 

 Sign in 페이지에서 User Data 받기 

sign-in-form 페이지에서

user 데이터 받아 setCurrentUser()에 넣어 유저 데이터를 업데이트 해보자

 

 

우선 signInAuthUserWithEmailAndPassword 로 받은 response에서 

destructuring 해서 user 정보만 받는다. 

 

 

 

이 user 정보를 context에 담아야 한다. 

그러기 위해 useContext hook과 userContext 를 사용한다.

 

useContext와 userContext를 불러온다.

 

 

 

useContext 안에 UserContext를 넣으면 

const data = useContext( UserContext ) 

이 data는 {currentUser, setCurrentUser} 이렇게 구성되어 있다.

 

페이지에는 필요한 setCurrentUser만 적어주고 

아래에서 user 데이터를 넣어 setCurrentUser 함수를 호출한다. 

 

 

 

 

 navigation에서 데이터 받아보기 

navigation에서도 UserContext를 불러와서 

사용할 currentUser만 적어준다. 

 

로그인을 한 후 콘솔에 currentUser 가 잘 나오는지 보자. 

 

 

 

 

 

 

콘솔에 navigation 컴포넌트에서 호출한 유저 데이터가 나온다.