자주 하는 행동이지만 습관을 들여야 할 사항이 있다.
최상위 classNamer과 컴포넌트명과 동일하게 하기
예를 들어 컴포넌트명이 Main.js
이면 최상위 클래스네임도className="Main"
으로 작명해 같은 파일임을 알아보기 쉽도록 해준다.
무의미한 div로 태그의 깊이가 깊어지지 않도록 주의한다.
동일한 속성을 가지는 class는 동일한 className를 부여해 scss파일의 내용이 쓸모없이 길어지지 가독성을 좋게 해준다. 컴포넌트 안에 또 컴포넌트가 들어가게 될 때 파일의 위치를 컴포넌트 안의 컴포넌트로 넣어준다.
그래야 내가 원하는 곳에서 수정이 가능하고 어느 부분의 컴포넌트인지 가독하기 쉬워진다.
const Nav = () => {
const [isLogin, setIsLogin] = useState(false);
return (
<header className="Nav">
<nav className="navBar">
<Link to="/" className="navLogo">
<img alt="logo" src="/images/logo.jpg" className="logoImg" />
</Link>
<div className="navLogin">
<Link to="subscribe" className="moveBtn">
구독서비스
</Link>
<Link to="/" className="moveBtn">
담아마켓(스토어)
</Link>
{isLogin ? (
<div
onClick={() => {
setIsLogin(true);
}}
className="moveBtn"
>
로그아웃
</div>
) : (
<Link to="/login" className="moveBtn">
로그인
</Link>
)}
<Link to="/cart">
<i className="fa-solid fa-1x fa-cart-shopping" />
</Link>
</div>
</nav>
</header>
);
};
.Nav {
position: relative;
display: flex;
justify-content: center;
.navBar {
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
max-width: 1006px;
width: 100vw;
height: 65px;
padding: 0 30px;
align-items: center;
.navLogo {
display: flex;
width: 120px;
align-items: center;
cursor: pointer;
.logoImg {
width: 100%;
}
}
.navLogin {
display: flex;
font-size: 16px;
font-weight: bold;
align-items: center;
.moveBtn {
margin: 0 15px;
border: none;
background-color: transparent;
color: #1b5218;
font-weight: bold;
cursor: pointer;
}
.fa-cart-shopping {
color: rgb(163, 175, 163);
cursor: pointer;
}
}
}
}
로직은 알아보기 쉽게 변수명도 명확하게 하기