[Folder Structure] Hooks? Utils? 차이점이 뭘까?

프로젝트 개발을 하던 중에 함수를 따로 모듈화 하던 중 갑자기 궁금해 진 것이 있었습니다.

"이렇게 특정 기능을 재사용하거나 관리하기 쉽게 따로 모듈화를 하는 건 좋은데, 어느 폴더에 넣어야 하지?"

이미지 슬라이드 기능을 가진 이 부분을 모듈화하려고 하였다

이미 어느 정도 초기에 폴더 구조를 나눠 두었지만 utils와 hooks의 차이점이 분명 존재했음에도 자세하게 알지 못해 잠시 갈피를 잡지 못하고 있었던 것 같았습니다

---

그렇다면 저는 왜 이 둘을 헷갈렸을까요?

utils와 hooks 폴더의 구분이 애매해질 수 있는 이유는 다음과 같습니다.

1. 함수의 역할이 겹치는 경우: 때로는 함수가 React 컴포넌트에서만 사용되는 로직을 포함하지만 동시에 일반 JavaScript 함수의 특성도 가질 수 있습니다. 이런 경우에는 어디에 배치할지 결정하기 어려울 수 있습니다.
2. 커스텀 훅이 일반 함수처럼 보이는 경우: 커스텀 훅이 React의 기본 훅을 사용하지 않고, 일반 함수처럼 작동하는 경우가 있을 수 있습니다. 이런 경우에도 어디에 두어야 할지 헷갈릴 수 있습니다.
3. 프로젝트 구조의 경험이 부족한 경우: 개발자가 프로젝트 구조에 대한 충분한 경험이나 이해가 부족할 경우, 어떤 함수가 어디에 속해야 하는지 판단하기 어렵습니다.

저는 이 중에서도 3번에 해당한 것이 아니었나 싶습니다. 이제 프로젝트 2개 정도를 경험하고 있는 시점이고, 프로젝트 구조에 대해 그렇게 깊게까지 파고들어본 경험이 없이 기능과 라이브러리, 프레임워크 숙련도에 기반한 활동들이 주 된 경험이라서 그런 것이 아닐까 싶었습니다.

그래서 어떤 기준을 정하지 못한다면 앞으로의 프로젝트 기간 중 상당부분을 이 폴더구조로 인해 고통받지 않을까 싶어서 가이드라인을 설정해보기로 했습니다.

이런 상황에서는 다음 가이드라인을 고려하여 결정할 수 있습니다.

• React 컴포넌트와 관련된 상태 관리나 라이프사이클 작업을 수행하는 경우에는 hooks 폴더에 두는 것이 좋습니다.
• React 컴포넌트와 상관없이 사용될 수 있는 일반적인 JavaScript 함수인 경우 utils 폴더에 두는 것이 좋습니다.

그러나 팀으로 진행하는 프로젝트라면, 프로젝트 팀과 함께 폴더 구조에 대한 규칙을 정의하고 이를 따르는 것이 중요합니다.

이렇게 하면 프로젝트 구조를 일관성 있게 유지하고 코드의 가독성을 높일 수 있습니다.

---

이제, 두 폴더의 차이점을 알아보고 후에 있을 프로젝트에 도움을 받아보도록 해볼게요!

프로젝트 구조: Utils와 Hooks 폴더의 차이점

React 프로젝트를 구축할 때, 애플리케이션의 구조를 잘 정의하는 것이 중요합니다. 이 글에서는 프로젝트 구조에서 일반적으로 사용되는 utils와 hooks 폴더의 차이점에 대해 설명하겠습니다.

Utils 폴더

utils 폴더는 프로젝트 전체에서 사용할 수 있는 JavaScript/TypeScript 함수나 코드 조각을 저장하는 데 사용됩니다. 이러한 함수들은 주로 다음과 같은 기능을 수행합니다:

• 비즈니스 로직 처리
• 데이터 변환 및 매핑
• 유효성 검사
• 에러 처리
• 날짜 및 시간 관련 작업
• 기타 프로젝트 전체에서 공통적으로 사용되는 작업들

utils 폴더에 있는 함수는 React 컴포넌트와 상관없이 사용할 수 있으며, 종종 다양한 상황에서 재사용되는 코드를 포함합니다.

Hooks 폴더

hooks 폴더는 커스텀 React 훅을 저장하는 데 사용됩니다.

커스텀 훅은 React 기능(상태 관리, 라이프사이클 메서드 등)을 추상화하여 컴포넌트 간에 재사용할 수 있는 로직을 만드는 데 도움이 됩니다.

예를 들어, useState와 useEffect를 결합하여 이미지 슬라이더를 만드는 커스텀 훅을 생성할 수 있습니다.

이렇게 하면 이미지 슬라이더 로직을 여러 컴포넌트에서 쉽게 재사용할 수 있습니다.

hooks 폴더에 있는 함수는 React 컴포넌트 내에서만 사용할 수 있으며, 특정 상태 관리나 라이프사이클 작업에 대한 로직을 포함합니다.

---

결론

utils와 hooks 폴더는 서로 다른 목적을 가진 폴더입니다. utils는 프로젝트 전체에서 사용할 수 있는 일반적인 JavaScript/TypeScript 함수를 저장하고, hooks는 컴포넌트 간에 재사용할 수 있는 React 관련 로직을 저장합니다.

이러한 구조를 따르면 프로젝트를 쉽게 유지 관리하고 확장할 수 있습니다.

더 간단하게 생각해볼까요?

위의 사진과 같이 모듈화를 한 파일에 React 고유의 useState, useCallback, useEffect 등을 포함하는 import문이 있으면 해당 파일은 커스텀 훅을 구현한 것이므로 hooks 폴더에 집어넣는 것이 좋습니다.

반면, React 고유의 import문이 없다면 해당 파일은 일반적인 JavaScript/TypeScript 함수를 구현한 것이므로 utils 폴더에 집어넣는 것이 좋습니다.

이렇게 구분하여 폴더에 파일을 분류하면 프로젝트 구조가 일관성 있게 유지되고, 코드의 가독성을 높일 수 있습니다.

---

요약

프로젝트를 개발하다가 특정 기능을 모듈화하려고 할 때, 해당 함수를 어느 폴더에 넣어야 할지 헷갈릴 수 있습니다. 이때 utils 폴더는 프로젝트 전체에서 사용할 수 있는 일반적인 JavaScript 함수를 저장하고, hooks 폴더는 컴포넌트 간에 재사용할 수 있는 React 관련 로직을 저장하는데 사용됩니다. 이렇게 구분하는 것은 프로젝트를 쉽게 유지 관리하고 확장할 수 있게 도와줍니다. 그러나 프로젝트 팀이 있다면, 함께 폴더 구조에 대한 규칙을 정의하고 이를 따르는 것이 중요합니다.

---

End