코드 깔끔하게 작성하기 (리액트, Styled-Components)

citron03·2022년 5월 24일
2

React

목록 보기
23/39
  • 자신이 짠 코드라도, 시간이 지난 뒤에 보면 이게 무슨 코드지? 하는 생각이 들 때가 있다.
  • 하물며, 다른 사람이 내 코드를 보는 것은 어떨까?
  • 그렇기에, 최대한 깔끔한 코드와 프로젝트를 위해서 내가 알아낸 방법을 남기고자 한다.

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";

🍞 코드를 깔끔하게 작성하기 위해서는 처음부터 규칙을 잘 정하고 꼭 규칙을 그대로 준수하는 일이 중요한 것 같다.

🧀 여기에 기록한 방법 이외에도 깔끔하게 코드를 작성하기 위한 많은 방법들이 있을 것이다. 늘 깔끔하게 코드를 작성하는 방법에 대해서 알아가도록 주의를 기울여야 겠다.

profile
🙌🙌🙌🙌

0개의 댓글