[최종 프로젝트] React 함수, 매개변수: 가독성을 높이는 작은 습관
내 개인적으로 이번 프로젝트에서 중요시 생각하며 진행하고 있는 부분은 컴포넌트화였다.
재사용성에 있어서 중요하기도 했지만 이번 기회에 컴포넌트에 대해서 더 진하게 공부하며 진행해 보고 싶었기 때문이다.
그러다보니 기능을 구현을 해놓고도 리팩토링을 해야하는 경우가 자주 생겼다.
이번 작업에도 통계를 보여주는 페이지를 `ResultComponent`로 컴포넌트화 시킨 후 `ResultHistory` 페이지에서 보여지게 작업을 리팩토링 하는 과정에서 문제가 생겼었다.
파일 및 함수 정리
`ResultComponent` : 통계를 보여주는 컴포넌트
`ResultHistory` : 통계 히스토리 페이지
`loadUserAndRetchData` : 유저의 통계 데이터를 받아오는 함수
처음에 작업한 방법
// ResultHistory.tsx
const ResultHistory = () => {
return (
<>
<div>이전 탄소 배출량 히스토리</div>
<div className="w-[1200px] border border-[#5bca11] mt-[12px] mb-[20px]"></div>
<div>
<div>{여기에 현재 달을 보여주고 싶어}월 탄소 배출량 결과표</div>
<ResultComponent/>
</div>
</>
);
};
// ResultComponent.tsx
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
const ResultComponent: React.FC<ResultComponentProps> = ({ year, month }) => {
const [user, setUser] = useState<string | null>(null);
const [thisYear, setThisYear] = useState<number | null>(currentYear);
const [thisMonth, setThisMonth] = useState<number | null>(currentMonth);
...
처음에는 위와 같이 컴포넌트 안에서 현재 연도와 달을 불러왔었는데 이러다 보니
`{여기에 현재 달을 보여주고 싶어}` 에 현재 달을 보여주기 위해선 어쩔 수 없이 `ResultComponent`에서 만든 `currentYear`, `currentMonth`를 다시 써줘야했다.
이를 방지하기 위해 해당 변수를 `ResultHistory`에서 관리 후 `props`에 넘겨주기로 변경을 하게 되었다.
(추후 여기서 연도와 달을 변경하면 바로 데이터가 보여지게 진행 예정이다.)
변경된 부분
// ResultHistory.tsx
const ResultHistory = () => {
const today = new Date();
const currentYear = today.getFullYear();
const currentMonth = today.getMonth() + 1;
return (
<>
<div>이전 탄소 배출량 히스토리</div>
<div className="w-[1200px] border border-[#5bca11] mt-[12px] mb-[20px]"></div>
<div>
<div>{currentMonth}월 탄소 배출량 결과표</div>
<ResultComponent year={currentYear} month={currentMonth} />
</div>
</>
);
};
// ResultComponent.tsx
const ResultComponent: React.FC<ResultComponentProps> = ({ year, month }) => {
const [user, setUser] = useState<string | null>(null);
// const [thisYear, setThisYear] = useState<number | null>(currentYear);
// const [thisMonth, setThisMonth] = useState<number | null>(currentMonth);
...
그런데 이렇게 작성을 하고 보니 이상한 점을 발견하게 되었다.
분명 기능이 잘 작동은 하는데 분명 `thisYear`, `thisMonth`에 대한 `state`가 삭제가 되었는데 작동이 잘 하는 것이지..?
문제의 코드
// ResultComponent.tsx
useEffect(() => {
loadUserAndFetchData(setUser, thisYear, thisMonth, setCurrentData);
loadTotalUsersData(year, month, setTotalAvgData);
...위의 `useEffect` 함수를 보면 아직도 사용되지 않는 `thisYear`, `thisMonth`가 사용되고 있었다..
loadUserAndRetchData 함수
// loadUserAndFetchData 함수
export const loadUserAndFetchData = async (
setUser: SetUserType,
thisYear: number | null, // <------ 여기
thisMonth: number | null, // <------ 여기
setCurrentData: React.Dispatch<React.SetStateAction<MonthlyData | null>>
) => {
const fetchedUser = await getUser();
if (fetchedUser) {
setUser(fetchedUser.id);
const { data, error } = await browserClient
.from("carbon_records")
.select("*")
.eq("user_id", fetchedUser.id)
.eq("year", thisYear) // <------ 여기
.eq("month", thisMonth) // <------ 여기
.gte(
"created_at",
new Date(
new Date().getFullYear(),
new Date().getMonth(),
1
).toISOString()
)
.order("created_at", { ascending: false })
.limit(1);
...
분명 함수에서도 thisYear이랑 thisMonth로 받아주고 있다..
폭풍검색을 하고 보니..
매개변수로 선언이 된 변수명은 함수 호출 시에 다른 이름의 매개변수로 전달이 가능했었다.
즉 `year`와 `month`는 호출 시의 인자로 사용되고, `thisYear` `thisMonth`는 함수 내부에서 이름을 바꿔서 사용하게 되는 것!!
// ResultComponent에서 호출할 때 year와 month를 인자로 전달
loadUserAndFetchData(setUser, year, month, setCurrentData);
export const loadUserAndFetchData = async (
setUser: SetUserType,
thisYear: number | null,
thisMonth: number | null,
setCurrentData: React.Dispatch<React.SetStateAction<MonthlyData | null>>
) => {
// thisYear와 thisMonth는 함수 호출 시 year와 month의 값을 받음.
// 내부에서는 thisYear와 thisMonth로 사용
호출 시 사용하는 이름과 함수 내에서 참조하는 이름이 일치해서 어떤 값이 전달되고 사용되는지 쉽게 알 수 있게 되었다
이번에 경험해보니.. 최대한 이름을 통일 시키는 것이 코드 가독성 측면에서 좋을 것 같다는 생각이 들었다.
다음부터는 매개변수와 인자의 이름을 일치 시켜서 코드의 일관성을 높여보기로!!