유틸과 커스텀 훅의 차이

유틸 : 그냥 로직을 따로 빼둔거
커스텀 훅 : useState, useEffect 등의 훅 hook 을 사용하는 로직을 따로 빼둔거

---

유틸 내보내기

유틸은 굳이 함수안에 감싸지 않고 { }로 내보낸다.

1. 각각 내보내기

// util 파일에서
export {aa}

쓰고 싶은 파일에서
import {aa: 내가 그 페이지에서 쓰고 싶은 이름} from "./~~~"
import {aa: example} from "./~~~"

2. 디폴트 값으로 내보내기

// util 파일에서
export default bb

// 쓰고 싶은 파일에서
import 내가 그 페이지에서 쓰고 싶은 이름 from "./~~~"
import example from "./~~~"

---

커스텀 훅 내보내기

커스텀 훅은 함수로 감싸서 내보낸다.

1. 각각 하나만 내보내기

// 커스텀훅 파일에서
export const useHook = {
const ...
return aa
}

// 쓰고 싶은 파일에서
const example = useHook()
// example은 aa 에 해당함

2. 배열로 내보내기

// 커스텀훅 파일에서
export const useHook = {
const ...
return [aa, bb]
}

// 쓰고 싶은 파일에서
const [exam, ple] = useHook()
// exam은 aa, ple 은 bb 에 해당함

3. 객체로 내보내기

// 커스텀훅 파일에서
export const useHook = {
const ...
return {aa, bb}
}

// 쓰고 싶은 파일에서
const {aa: exam, bb: ple} = useHook()

---

export / export default

한 파일 안에 export 와 export default 혼용이 가능하다.
가장 큰 차이점은 위의 예시에 보인 것 처럼
export 의 경우 import 할 때 경로 내의 정확한 이름을 기입해주어야 하지만,
export default 의 경우 해당 경로의 기본 값으로 내보내져서 경로만 같다면 어떤 이름이든 상관없다.

---

참고 :
커스텀 훅 만들기