[chore] 파일 구조 수정
8403 단어 MoneyDiaryMoneyDiary
components 파일 구조 수정 전
components 파일 구조 수정 후
component 각 이름에 맞는 파일을 만들어주고 index.js와 styles.js로 분리해주었다.
pages 파일 구조 수정 전
pages 파일 구조 수정 후
세부적인 파일 구조
mainPage - index.js
import React from 'react';
import { Link } from 'react-router-dom';
import SelectBar from '../../components/selectBar';
import * as s from './styles';
const MainPage = () => {
return(
<>
<s.Wrapper>
<s.BtnWrapper>
<Link to={'/'}>
<s.Btn value='account'>
<i className="fas fa-coins"></i>
</s.Btn>
</Link>
<s.Stick></s.Stick>
<Link to={'/calendar'}>
<s.Btn value='calendar'>
<i className="fas fa-calendar-alt"></i>
</s.Btn>
</Link>
</s.BtnWrapper>
</s.Wrapper>
<SelectBar/>
</>
);
}
export default MainPage;
mainPage - styles.js
import styled from 'styled-components';
export const Wrapper = styled.div`
width:100%;
display:flex;
height:60px;
align-items:center;
justify-content:center;
`;
export const BtnWrapper = styled.nav`
width:150px;
margin-top:25px;
display:flex;
justify-content:space-between;
`;
export const Btn = styled.button`
width:30px;
padding:0px;
font-size:30px;
border:none;
outline:none;
background:none;
&:hover{
cursor:pointer;
transform:scale(1.3);
transition:transform 0.5s linear;
}
`;
export const Stick = styled.div`
width:2px;
height:32px;
background:black;
`;
redux 파일 구조 수정 전
redux 파일 구조 수정 후
폴더를 사용하여 정리를하니 좀 더 깔끔해지고, 직관적인 것 같다.
Author And Source
이 문제에 관하여([chore] 파일 구조 수정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sangyun5108/chore-파일-구조-수정저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)