안녕하세요!
오늘은 export에 대해 짧게 알아보고 넘어가보려고 합니다!
react를 하면서
"export"가 있고 "export default" 가 있는데 대체 무슨 차이지? 라는 생각이 들었습니다 보통은 rfce로 컴포넌트로 진행을 했기 때문에 무슨 차이지? 라는 생각은 있지만 찾아볼 생각을 못 해봤습니다...
그래서! 제가 이번에 알아보았습니다!
그러면 바로 시작해보시죠
export를 왜 써야하는거죠?
음.. 리액트를 진행하면서 export는 빼 놓을 수 없는 단어죠
왜냐하면 여러 컴포넌트들을 활용해서 하나의 페이지를 만들어서 진행하는 경우가 많기 때문에 export가 필수적입니다
여러 컴포넌트들 내보내기 위해서 export를 활용합니다
export는 어떤 종류가 있나요?
일단 제가 알아보고 공부한 결과로는
export
export default
이렇게 총 두 가지의 종류가 있습니다
어? 익숙해요! 그럼 저 둘은 어떻게 차이가 있는거죠?
먼저 쉽게만 설명하자면
export = 해당 컴포넌트를 일단 내보낼게요!
export default = 해당 컴포넌트를 대표로 내보낼게요!
조금 더 자세히 들어가자면
export
-> export로 내보내기를 한다면 무조건 컴포넌트 이름을 그대로 import 해야됩니다
export default
-> export default 로 내보내기를 한다면 export한 이름과 상관 없이 import를 할 수 있습니다
음... 글로만 작성 되어 있어서 잘 모르겠어요! 예시를 보여주세요!
네! 예시를 들어서 보여드리도록 하겠습니다
export default로 내보내기 했을 때
import TodoList from './components/TodoList'이렇게 작성할 수 있습니다!
또 추가적으로 export default는 이름을 아무렇게 적어주어도 상관이 없습니다
예를 들어
import TL from './components/TodoList'이렇게 적어도 import가 가능합니다!
왜냐하면 export default는 대표로 내보내기 때문에 이름을 바꿔주어도 파일 경로만 맞다면 상관이 없습니다
export로 내보내기 했을 때
import {TodoList} from './components/TodoList'export로 내보내기 했을 때는 꼭 import 이름을 중괄호에 감싸주어야합니다
export는 export default 와 다르게 이름을 바꿔주면 안됩니다!
이런 차이가 있습니다!
네! 오늘은 이렇게 export에 대해 알아보았습니다!
간단하지만 알고 지나가면 좋은 정보라고 생각해서 이렇게 가져왔습니다!
오늘 알아보았고 이렇게 포스팅하는 상황이라서 많은 정보를 담지 못 했습니다..!!
혹시나 추가가 필요한 정보가 있거나 수정이 필요한 정보가 있다면 댓글로 남겨주시면 정말 큰 도움이 될 것 같습니다!!
네! 오늘은 머리가 너무 아파서 이만 마무리하고 오늘은 이렇게 들어가야될 것 같습니다...
그러면 오늘도 빠이팅이고
우리는 또 행복하자구요!!
