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

#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) => ( # {topic} ) return ( //Sidebar 상단 //Sidebar의 배경이미지 //프로필 사진 Url이 있다면, 그걸로 사진을 띄우거나 //없다면 user 정보 중 이메일의 첫글자를 아이콘으로 띄운다 {user.email[0]} //Redux의 user 정보에 담긴 이름과 이메일을 데이터 바인딩한다 {user.displayName} {user.email} //Sidebar 중간 부분 Who viewd you 2,534 Views on Post 2,243 //Sidebar 하단 Recent //반복되는 코드 사용을 줄이기 위해 //커스텀함수를 사용하여 화면을 구성한다 {recentItem('digitalmarketing')} {recentItem('programming')} {recentItem('softwaredevelopment')} {recentItem('startups')} ) } export default Sidebar

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

from http://freedman.tistory.com/51 by ccl(A) rewrite - 2021-05-31 16:26:17