좋은 코드 : 가독성, 중복을 제거하여 재사용 할 수 있는 유지 보수성을 고려한 코드
가독성 Tip
type 확인 라이브러리
TS를 쓰지 않는다면, prop-types를 사용하면 좋습니다.
지정한 타입이 오지 않았을 때, 오류를 막아줄 수도 있지만,
지정한 타입을 보고, 컴포넌트 내에서 어떤 값을 관리하는지 알 수 있습니다.
import 위치
이 파일에서 필요한 것들에 대한, import의 위치도 가독성을 고려하면 좋습니다.
node modules > utils > 멀리있는 컴포넌트 부터 > style 관련
import { useEffect, useState } from 'react';
import styled from 'styled-components';
import { recentShowStorage, uninterestStorage } from 'store';
import { fetchProducts } from 'utils/api';
import Product from './Components/Product';
import Filter from './Filter';
컴포넌트 중심으로 배치
styled-component등 css-in-js를 적용했다면, 스타일 코드보다 로직이 위로 오게합니다.
해당 컴포넌트가 어떤 역할을 하는지 먼저 볼 수 있게 합니다.
상수 설정
공통으로 사용하는 상수, utils성 함수들은 외부 파일로 분리하거나 밖으로 빼서 작성합니다.
리액트 컴포넌트 분리
새로운 함수나 객체를 만들 때 처럼, 리액트 컴포넌트 역시 단일 책임 원칙을 지킵니다.
하나의 컴포넌트는 한가지의 일을 하는게 이상적이라는 원칙입니다.
이를 위해선, 더 작은 하위 컴포넌트로 분리해야합니다.
컴포넌트 분리
컴포넌트는 결국 html 태그를 반환하며, html 요소의 역할을 기준으로 컴포넌트를 나눕니다.
function userListPage() {
return {
<Filter />
{list.map(...)}
<button onClick={...}> </button>
<Popup open={...} />
}
}하지만, 기준 없이 컴포넌트를 설계하여 분리하면 문제가 생길 수 있습니다.
컴포넌트의 역할이 무엇인지 파악을 하기 쉽도록 컴포넌트를 설계하여 작성합니다.
역할을 쉽게 파악하기 위해서는, 컴포넌트의 핵심 내용을 응집도있게 하는 것과,
컴포넌트의 추상화 정도를 고려하여 설계합니다.
state 사용
프로그램이 필요로하는 가장 최소한의 state집합을 사용합니다.
그때 그때 계산하여 찾을 수 있는 값을, 별도의 state로 만들지는 않았는지
즉, 중복된 state가 사용되진 않았는지 고려합니다.
또한, 정적인 값을 state로 사용하진 않았는지 고려하여 state를 사용합니다.
