#패스트캠퍼스 #패스트캠퍼스부트캠프 #프론트엔드프로젝트십
firebase를 이용한 구글 로그인을 해서 구글 로그인하는 팝업이 뜨게 했고, firebase에서 설명서에 이렇게 하면 된다고 설명서를 써놓은 것을 보고 구현했다.
로그인을 다한 다음 파이어베이스에서 로그인한 유저의 데이터를 handleAuth에 전달해주었다. error까지 처리가 가능했는데, 아무것도 설정을 해주지 않았을 때는 로그인하려고 할 때 에러가 발생했는데, google authentication을 enable했을 때 에러가 사라졌다. onAuthStateChanged를 통해 인증상태를 체크했다. 마지막으로 handleLogOut 함수를 호출해주었다. 그리고 데이터를 유지하기 위해 localStorage에 userData를 담아주었다. setItem 이라는 메소드를 이용해서 키값과 value를 넣어주면 저장이 되는 것을 볼 수 있었다. 저장 시에는 string으로, 가져올때는 parse를 이용해서 객체로 저장해주었다. 마지막으로 파이어베이스를 이용해 앱을 배포해보았다.
<aside> 💡 리액트에서 호출할 때 컴포넌트들이 여러개 있었는데, 데이터 전달시에는 props를 이용해서 data를 내려 주었다. 그런데, 컴포넌트들이 계속 많아질 경우에는 데이터를 계속 내려주어야 하기 때문에 개수가 많아질수록 관리가 힘들어지고 복잡해지는 단점이 있다. react에서 state를 관리해주는 라이브러리들이 있는데, redux, mobx, 그리고react context, justand 등이 있다. 그 중에서 react context는 따로 설치없이 사용이 가능하다. (global)
</aside>
컨텍스트는 모든 수준에서 수동으로 props를 전달하지 않고도 구성요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공한다. 보통 state를 props로 계속 내려주었는데(여러번 내려주어야 한다.), context를 이용하면 context 내부의 value를 업데이트하거나 (한번에 가져오고 업데이트가 가능하다.) 하는 것들이 훨씬 편리해진다.
깊이에 관계없이 props를 전달하지 않고도 컴포넌트에 데이터를 제공한다. context는 전역 데이터를 관리하는데 사용이 된다. (전역적으로 업데이트 가능)
전역 데이터를 context에 담아 사용하려면 먼저 생성이 필요하다. React.createContext(defaultValue);로 넣어준다.
oontext를 사용할 때 providers를 통해 사용을 원하는 컴포넌트를 감싸주면 , value를 가져와서 사용할 수 있다. 이 컨텍스트 객체 안에 있는 provider을 통해, 감싸주면 내부에 있는 value를 쓰게 된다.
감싸주는 방법은 2가지인데, 생성시 넣어줄 수 있고, 제공해주는 provider과 속성의 값으로 value를 넣어주면 된다. 그렇다면 default value로 넣어놓았던 것은 어떻게 될까? 결국 context.provider을 사용하게 되어, 값이 덮어진다.
createContext에서 기본값으로 유저 이름을 john으로 주면, 처음에는 john이 들어있게 된다. 그런데 value에 유저 이름을 Han으로 주게 되면 유저이름이 바뀌게 된다. 즉, 처음에 initial value를 넣어주더라도 value 값에 따라 변경이 일어난다.
위에처럼 a,b,c 컴포넌트에서 가져와서 사용할 수 있는데 이것은 다음 방법을 사용한다.
클래스형 컴포넌트에서 콘텍스트를 사용하는 방법 중 하나로 contextType을 사용할 수 있다.
# 사용예시
app이 부모 컴포넌트이고 themebutton은 toolbar에서 사용을 하고 있다. themebutton에 버튼이 위치한다.
**const ThemeContext = React.createContext((themes.light);**
에서 생성을 해주고
이후, context의 dark의 속성값이 들어간 것을 알 수 있다.
컴포넌트를 감싸주기 위해, ThemeContext.Provider로 툴바를 감싸주어, props 없이도 데이터를 사용할 수 있게 했다. value를 2번에서 dark값을 넣어주었기 때문에 1번에서 생성할 때 light 값을 넣어주었어도 dark로 바뀌게 된다.
데이터를 가져오는 부분은 ThemeButton에서 가져오는데,
context객체를 가져온다. 그리고 return하는 Theme변수안에 들어있는 것이 dark 속성이 된다.
react-context-app을 생성해서 테스트한다.
npx create-react-app ./
# app.js로 가서
아래와 같이 수정한다.