유틸
: 그냥 로직을 따로 빼둔거
커스텀 훅
: 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 의 경우 import 할 때 경로 내의 정확한 이름을 기입해주어야 하지만,
export default 의 경우 해당 경로의 기본 값으로 내보내져서 경로만 같다면 어떤 이름이든 상관없다.
참고 :
커스텀 훅 만들기