정말 간단한 트러블 슈팅!

Hwang Tae Young·2022년 12월 29일
0

기본 셋팅을 하면서 라우터 설정을 하고, Link태그로 라우팅을 시키니까 저런 오류가 떳다 처음에는 뭔가 했는데,,,,, 정말 간단한 오류,,,
내가 짠 컴포넌트의 코드가

export const CardDetail = () => {
  return <div>CardDetail</div>;
};

이런식으로 되있었기 때문!
export를 해줄때, export default를 사용해야 하는 것이었다,,,, 하하하핳
내가 만든 컴포넌트들은 전부 export const로 해두었기 때문에 다시 전부다 export default function 식으로 바꾸어 줌으로 해결완료!

export default function CardDetail(){
  return <div>CardDetail</div>;
};

그렇다면, export 와 export default의 차이점은 무엇이고 next.js에서는 왜 export default를 사용하라고 하는걸까?

결론만 말하자면 정확히 왜 export default를 사용하는 이유는 찾지 못했다고 한다,,,,,,,

export와 export default의 차이는 import할때 있다!

✅ export [name]

export const Home = () => {}
--------
import {Home} from "../../Home"
정확히 export한 이름으로 받아와야 한다.
만약 다른 이름으로 사용하고 싶다면?
import {Home as House} from "../../Home"
이런식으로!

✅ export default [name]

const Home = ()=>{}
export default Home;
or
export default function Home(){}
보낼때는 이런식으로 작성할 수 있고, 받을 때는
---------
import [name] from "../../Home";
이런식으로 내가 원하는 이름으로 받아와 사용할 수 있다.

컴포넌트의 경우 컴포넌트를 제외한 것들은 있지 않기 때문에 주로 export default를 사용하는 것 같고,

export [name]의 경우는

export const useGetList = async () ={}
export const useMutation = async () =>{}

이런식으로 여러가지를 함수를 묶어둔 모듈같은 경우에 사용하면 좋을 것 같다!

profile
더 나은 개발자가 되기 위해...☆

0개의 댓글