728x90
자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다.
하물며, 다른 사람이 내 코드를 보는 것은 어떨까?
그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다.
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";
🍞 코드를 깔끔하게 작성하기 위해서는 규칙을 정하고 준수하는 것이 중요하다.
🧀 여기에 기록한 방법 이외에도 깔끔하게 코드를 작성하기 위한 많은 방법들이 있다. 앞으로도 늘 깔끔하게 코드를 작성하는 방법에 대해서 알아가도록 하자.
728x90
'React' 카테고리의 다른 글
axios의 interceptors 기능 사용하기 (0) | 2022.11.11 |
---|---|
useEffect의 Clean-up 함수 (0) | 2022.11.10 |
SuperAgent로 API 호출하기 (0) | 2022.11.10 |
React Query를 통한 실시간 서버 통신 (useQuery hook) (0) | 2022.11.08 |
간단한 Recoil 사용법 (0) | 2022.11.06 |