#9. 작성한 모든 컴포넌트를 합쳐주기 | App.js

마지막으로 그동한 작성한 모든 컴포넌트들을 App.js에 합쳐준다.

 

function App() {

  const user = useSelector(selectUser);
  const dispatch = useDispatch();

   useEffect(()=>{
    auth.onAuthStateChanged((userAuth)=>{
      if (userAuth) {
        // 로그인상태 유지
        dispatch(login({
          email: userAuth.email,
          uid: userAuth.uid,
          displayName: userAuth.displayName,
          photoUrl: userAuth.photoURL
        }))
      }else {
        // 로그아웃
        dispatch(logout());
      }
    })
   },[]);

  return (
    <div className="app">
      
      //헤더 컴포넌트
      <Header />

      {!user 
     	//로그인 컴포넌트
       ? (<Login />) 
       : (
        <div className="app__body">
          //사이드바 컴포넌트
          <Sidebar />
          
          //피드 컴포넌트
          <Feed />
          
          //위젯 컴포넌트
          <Widgets />
        </div>
       ) }

    </div>
  );
}

export default App;