[React] helpers와 utils 디렉터리는 어떻게 구분할까?

helpers와 utils 차이점

처음 리액트로 프로젝트를 만들어보면서 모든 로직을 하나의 컴포넌트에 처리하는 멋진 개발을 했다!

그러다 코드가 복잡해져서 여러 컴포넌트로 분리해야겠다는 생각에 리액트 프로젝트 구조를 좀 찾아보았다.

다양한 글이 구조를 설명하지만 딱 정해진 구조는 없고 애플리케이션에 맞게 유동적으로 가져가면 되는 거 같았다.

그중에서 helpers와 utils 디렉터리의 구분이 명확하게 이해되지 않았다. 좀 더 찾아보다가 나에게 가장 와닿는 설명을 해주는 블로그 글과 깃헙 이슈를 찾았다.

helpers 폴더 정의 참고 블로그

여러 블로그 글을 읽어보면서 helpers 폴더에 대해서 읽어봤지만 위 블로그의 설명이 나에게 가장 와닿았다. 해당 블로그에서는 특정 데이터를 가져오거나 특별한 작업을 수행하는 함수를 보관하는 폴더라고 말하고 있다. 내 경우에는 helpers 폴더로 API와 통신해야하는 로직을 모아두었다.

utils 폴더 정의 참고 링크

해당 링크에서 멋쟁이 네덜란드 개발자가 남겨준 utils 폴더 설명은 다음과 같다. 애플리케이션 전체에서 사용할 수 있는 작은 함수들의 집합이다. 이 함수들은 더 큰 기능을 구축하는 데 사용된다. 내 프로젝트에서는 이미지를 다운로드를 처리하는 함수가 있는데 이런 작은 함수를 utils 폴더에 넣어두기로 정했다.

결론적으로 helpers는 데이터를 다루는 함수 집합이고 utils는 큰 기능을 만들기 위한 작은 함수를 담은 폴더이다.

어떻게 보면 내가 구상하고 싶은 프로젝트 구조에 맞는 설명을 찾은 거 같지만 일단 만들어보면서 더 개념을 잡아가야겠다.

Uploaded by N2T