이전에 과제로 HTML, CSS, Javascript를 이용하여 홈페이지와 블로그를 만든 적이 있다.
기존에 존재하는 웹사이트를 똑같이 만든 클론 코딩이었지만 꽤 그럴듯하게 만들어져서 기존의 스타일을 수정하고 기능을 추가하면 괜찮은 나만의 웹페이지로 만들 수 있을 것 같아 가벼운 마음으로 시작했는데 생각보다 가볍지 않았다.
넣으면 넣을수록 늘어나는 코드는 주석을 달지 않으면 뭐가 뭔지 헷갈리는 순간이 왔고, 기능을 추가하는 시간보다 수정을 하기 위해 코드 더미를 뒤지는 시간이 더 걸렸다.
무엇보다도 기능이나 콘텐츠들이 쌓일수록 이미지를 불러오는 시간이 길어지는 게 가장 골치가 아픈 일이었다.
문제를 해결할 방법이 없을까 하다가 Import 와 Export를 이용하여 모듈을 불러오는 방식으로 만들면 나처럼 무식하게 <div class>를 남발하는 게 아닌 적은 수고로 훨씬 더 프로페셔널한 결과물을 만들 수 있다는 걸 알게 되었다.
근데, Import 와 Export는 뭐고 모듈은 무엇을 말하는 걸까?
모듈 이란?
모듈이란 결과물을 만들기위해 작성했던 모든 파일을 말한다.
이안에 있는 모든 파일이 모듈이다!
- Import & Export 이란?
- Import : 외부모듈안의 기능을 갖고오기위한 코드
(모듈 가져오기)- Export : 변수나 함수앞에 붙이면 외부 모듈에서 해당 변수나 함수에 접근할수 있는 코드
(모듈 내보내기)
근데 기존에도 CSS와 Javascript라는 모듈을 불러왔고 그 모듈 안의 기능을 잘 썼었는데 기존 방식과 뭐가 다르고 뭐가 좋다는 걸까?
위에 작성한 코드는 next.js를 이용하여 만든 모듈이며, 실행시켜보면 하단처럼 출력된다.
코드를 살펴보면
styles폴더의 emotion 이라는 모듈 에서 {MyTitle}이라는 기능을 불러온다(Import) 라는 내용이고 하단은 import가 가져온 emotion 모듈이다.
import styled from '@emotion/styled'는
@emotion/styled에서 styled를 불러왔다는(import) 코드이다.
EmotionPage에 기능을 내보낸다(Export) 는 코드이다.
Import 와 Export는 한 세트이며 둘 중 하나라도 없으면 내보낼 수도 가져올 수도 없다.
두 코드는 바닐라 자바스크립트에 들어있는 기본 기능이기 때문에 사용하기 위해선 js로 해야 하며 html이나 CSS 확장자를 따로 만들지 않고 자바스크립트 안에 기재를 한다.
기재하는 방법은 return을 기준으로 상단은 자바스크립트를 기재하고 하단은 html 코드를 기재한다.
CSS는 상단에 기재되어 있는 emotion에 기재해 주면 된다. emotion 또한 확장자가 js이며, 별도로 설치해야 사용 가능하다.
설치는 emotion 홈페이지(https://emotion.sh/)를 참고하면 된다.
다시 본론으로 돌아가서 그럼 Import 와 Export는 주로 어떻게 사용 가능할까?
리액트(React JS)의 핵심요소인 컴포넌트(Component) 를 위해 주로 사용한다.
그러면 리액트를 사용하기 위한 것이 아닌가라고 생각이 들 수 있지만 놀랍게도 자바스크립트에 기본적으로 포함되어 있는 기능이기에 굳이 리액트를 사용하지 않더라도 사용 가능하다.
그렇다면 컴포넌트란 무엇일까?
컴포넌트(Component)란
UI나 기능을 외부에 만들어놓고 필요할 때마다 불러오는걸 말한다.
설명을 보았을 땐 어떤 것인지 전혀 감을 잡을 수가 없는데 레고를 생각하면 쉽다.
레고를 완성하기 위해 정사각형의 파츠, 직사각형 파츠를 모아 자동차나 비행기를 만드는 것처럼 이미지를 표시하는 부분, 메인 글을 작성하는 부분, 저장하는 부분 등 여러 기능을 만든 후 하나의 페이지로 만드는 걸 말한다.
컴포넌트의 특징은 외부 파일에 만들어놓고 필요할 때마다 연결만 해주면 언제든 재사용이 가능하다는 점이고 또 하나는 기존엔 같은(혹은 비슷한) 콘텐츠를 여러 개를 만들기 위해선 동일한 코드를 여러 번 작성해야 했고, 수정하게 될 경우엔 동일하게 기재되어있는 코드들을 전부 수기로 수정해야 하는 불편함이 있다 하지만 컴포넌트를 할 경우엔 원본이 되는 파일만을 수정하면 연동된 모든 파일이 수정이 가능하다는 장점이 있다.
정리하자면 각 모듈 (ex: 이미지를 업로드하는 기능, 양식폼에 기재되어 있는 데이터를 저장하는 기능 혹은 파일)들이 모아서 만든 것을 컴포넌트라고 생각하면 된다.
