- 자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다.
- 하물며, 다른 사람이 내 코드를 보는 것은 어떨까?
- 그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다.
Styled-Components 분리하기 (S-dot)
-
Styled-Components의 이름을 짓는 방법에 대해서 고민하던 와중, 외국의 블로그들과 다른 사람들의 코드를 보고 찾은 방법이다.
-
기본적으로 다음과 같이 Styled-Components를 작성한다.
import styled from 'styled-components';
const S = {};
S.Home = styled.div`
text-align: center;
font-size: 1.3rem;
`
S.P = styled.p`
color: red;
`
export default S;
-
파일의 이름은 이 스타일드 컴포넌트가 사용될 컴포넌트의 이름과 관련되게 짓는다.
🍆 ex) Home.jsx에 사용될 스타일드 컴포넌트가 모인 파일의 이름은 Home.styled.jsx -
가장 바깥의 div는 이 스타일드 컴포넌트들이 사용될 컴포넌트의 이름으로 짓는다.
-
그리고 다른 사용될 스타일이 적용된 컴포넌트들의 이름도 기본적으로 태그의 이름을 따서 짓거나, 덧붙여 기능과 관련된 이름을 붙인다.
🥔 ex) S.TitleH1 = styled.h1 ~생략~ -
컴포넌트에서 스타일드 컴포넌트 파일을 불러 사용한다.
// Home.jsx
import S from "./Home.styled.jsx";
const Home = () => {
return (
<S.Home>
<S.P>Hello Worlds!</S.P>
</S.Home>
);
}- 이런 방식을 사용함으로써, 긴 스타일드 컴포넌트를 분리할 수 있고, 스타일드 컴포넌트는 S로 시작하는 이름을 갖기에 구분하기도 쉽다.
index.js로 한번에 import 하기
-
리액트에서 코드를 많이 작성하다 보면, import 해오는 코드만 여러줄이 되는 경우가 있다.
-
한 폴더에서 여러 개의 컴포넌트를 불러오는 경우도 많은데, 이 경우 index.js로 폴더의 파일을 한 번에 불러올 수 있다.
-
Home 폴더 내부에 Hi.jsx, Bye.jsx, Good.jsx가 있다고 했을 때 같은 폴더에 index.js를 다음과 같이 작성한다.
// index.js
import Hi from "./Hi";
import Bye from "./Bye";
import Good from "./Good";
export {Hi, Bye, Good};- 이제, Home 폴더 내부의 파일을 import 할 때는 다음과 같이 폴더를 경로로 하여 한 줄의 코드로 모든 컴포넌트를 불러올 수 있다.
import {Hi, Bye, Good} from "../Home";🍞 코드를 깔끔하게 작성하기 위해서는 처음부터 규칙을 잘 정하고 꼭 규칙을 그대로 준수하는 일이 중요한 것 같다.
🧀 여기에 기록한 방법 이외에도 깔끔하게 코드를 작성하기 위한 많은 방법들이 있을 것이다. 늘 깔끔하게 코드를 작성하는 방법에 대해서 알아가도록 주의를 기울여야 겠다.
🙌🙌🙌🙌