#5. 메인화면 및 사이드바 구현 | Sidebar.js

로그인이 되었다면, Sidebar, Feed, Widgets이 보여야 한다

App.js의 JSX 부분에서 삼항연산자를 사용하여, 로그인 시 메인화면이 보이도록 코드를 작성하였다. 이 때 메인 화면은 Sidebar, Feed 그리고 Widgets 컴포넌트로 구성된다. 우선은 Sidebar 부분을 구현하고자 한다.

 

import { Avatar } from '@material-ui/core'
import React from 'react'
import { useSelector } from 'react-redux'
import { selectUser } from './features/userSlice'
import './Sidebar.css'

function Sidebar() {

	//Sidebar에는 로그인한 이름과 이메일이 보여야 한다
    //따라서 user 정보를 Selector로 가져온다
    const user = useSelector(selectUser);

	//Sidebar에서 해쉬태그 구현 시 반복되는 코드 사용을 피하기 위해
    //커스텀함수를 사용하였다
    const recentItem = (topic) => (
        <div className="sidebar__recentItem">
            <span className="sidebar__hash">#</span>
            <p>{topic}</p>
        </div>
    )

    return (
        <div className="sidebar">
        	//Sidebar 상단
            <div className="sidebar__top">
            	//Sidebar의 배경이미지
                <img src="https://images.unsplash.com/photo-1557683316-973673baf926?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1015&q=80" 
                alt=""></img>
                
                //프로필 사진 Url이 있다면, 그걸로 사진을 띄우거나
                //없다면 user 정보 중 이메일의 첫글자를 아이콘으로 띄운다
                <Avatar src={user.photoUrl} className="sidebar__avatar">{user.email[0]}</Avatar>
                
                //Redux의 user 정보에 담긴 이름과 이메일을 데이터 바인딩한다
                <h2>{user.displayName}</h2>
                <h4>{user.email}</h4>
            </div>

			//Sidebar 중간 부분
            <div className="sidebar__stats">
                <div className="sidebar__stat">
                    <p>Who viewd you</p>
                    <p className="sidebar__statNumber">2,534</p>
                </div>
                <div className="sidebar__stat">
                    <p>Views on Post</p>
                    <p className="sidebar__statNumber">2,243</p>
                </div>
            </div>

			//Sidebar 하단
            <div className="sidebar__bottom">
                <p>Recent</p>
                //반복되는 코드 사용을 줄이기 위해
                //커스텀함수를 사용하여 화면을 구성한다
                {recentItem('digitalmarketing')}
                {recentItem('programming')}
                {recentItem('softwaredevelopment')}
                {recentItem('startups')}
            </div>
        </div>
    )
}

export default Sidebar

Redux에 저장된 user 정보를 Selector로 가져와 데이터 바인딩 하는 것 이외에 특별히 어려운 것은 없었다.