#1. 사용된 컴포넌트들 정리

프로젝트를 위해 사용된 수 많은 컴포넌트들

프로젝트 구성을 위해 상당히 많은 양의 컴포넌트들이 사용되었다. 그래서 각 컴포넌트가 화면에서 어느 부분에 적용되었는지를 정리해보았다. 

 

로그인 화면에 사용된 컴포넌트들

메인화면에 사용된 컴포넌트들

Header, HeaderOption, Login, Sidebar, Feed, InputOption, Post, Widgets 순으로 완성을 하였다. 우선 App.js에 이러한 컴포넌트들을 import하여, 코드를 작성하였다.

 

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import './App.css';
import { login, logout, selectUser } from './features/userSlice';
import Feed from './Feed';
import { auth } from './firebase';
import Header from './Header';
import Login from './Login';
import Sidebar from './Sidebar';
import Widgets from './Widgets';

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부분
      <Header />

      {!user 
      //로그인이 안되어 있다면 보여질 Login 컴포넌트
       ? (<Login />) 
       : (
        <div className="app__body">
          //로그인이 되었다면 보여질 Sidebar, Feed, Widgets 컴포넌트
          <Sidebar />
          <Feed />
          <Widgets />
        </div>
       ) }

    </div>
  );
}

export default App;