14.자바스크립트[컴포넌트,모듈]

1 컴포넌트

컴포넌트는 웹 애플리케이션의 구성요소로 웹 애플리케이션을 기능별로 나눈 독립적인 부분

• 중복코드 작성하지 않고 재사용 가능 
• 기능과 구조를 명확하게 분리 가능
• 독립적인 요소  -> 유지보수 편리

컴포넌트와 모듈

• 4 개의 버튼들이 있는 TabBar와 사진들을 Content로 나누고 각각 TabBar.js와 Content.js로 분리함
• API를 호출하는 기능은 별도의 컴포넌트로 나누지 않았음
  -> 컴포넌트는 주로 사용자 인터페이스와 사용자와 상호작용을 하는 부분, UI를 나타내기 때문에
• UI 재사용 부분이 아닌 재사용이 가능한 어떠한 기능인 API 를 호출하는 코드는 컴포넌트로 나눌 수 없음
  -> 컴포넌트로 분류할 수는 없지만 중복되는 기능은 컴포넌트가 아닌 하나의 모듈로 나눌수 있다

모듈

• 재사용 가능한 코드의 집합으로 , 특정 기능을 수행하는 코드를 하나의 단위로 묶어 관리함
• 모듈은 코드를 쉽게 관리 할 수 있도록 중복되는 기능을 작은 단위로 나눠 쉽게 재사용할 수 있도록 하는 방법 
• 여러 부분으로 나눠진 코드를 각각의 모듈로 만들어 관리하면 필요할 때마다 조합해서 사용함
• 재사용하기 쉽고 코드의 가독성이 좋아지고 코드의 유지보수기 편리함

2. 컴포넌트와 모듈시스템

모듈시스템

컴포넌트 단위로 나눈 자바스크립트 파일은 하나의 모듈이며 다른 파일에서 필요할 때 가져와 사용가능함

 

모듈 사용법 알아보기

• 자바스크립트는 ES6 버전부터 기본적으로 ECMAScript 모듈 시스템이라는 모듈 시스템 제공함
• 모듈 시스템에서 모듈은 보통 하나의 파일을 의미하고 이 모듈들은 각각 자신만의 스코프를 갖고 있음
  -> 일반적으로 모듈 내부에 작성되어 있는 기능들은 서로 외부에 공유할 수 없고 모듈 내부에서만 사용 가능함
  -> 즉 모듈 내부에 작성된 식별자들은 전부 비공개 처리가 되어 있음 
• ECMAScript 모듈 시스템은 비공개 처리된 식별자들을 공개 상태로 변경해 주는 Export라는 키워드를 제공함

• 식별자의 선언문 앞에 Export 키워드를 작성하면 해당 식별자는 공개 상태변경되어 다른 파일에서 사용 가능한 상태가 됨
• export 키워드를 통해 공개된 식별자를 다른 파일에서 사용하기 위해서는 ECMAScript 모듈 시스템이 제공하는 import라는 키워드를 사용함

자바스크립트의 ESMAScript 모듈 시스템에서는 이 Export 키워드를 사용해 외부에 공개할 기능을 명시해주고
import라는 키워드를 통해 다음과 같이 공개된 모듈들을 가져올 수 있음 

 

자바스크립트 파일을 모듈로서 사용하는 방법

• index.html 파일에 스크립트 태그의 타입을 모듈로 설정함
• 모듈로 사용되는 자바스크립트 파일은 자바스크립트의 파일이 아니라 모듈임을 명시해 주기 위해 JS에서 mjs로 변경해 줌 

한 번에 import 하고 export 하는 방

 

• 만약 모듈에서 내보내고자 하는 값이 다음과 같이 단 한 개만 존재한다면 코드의 가장 아래쪽에  default라는 키워드를 작성해서 식별자를 좀 더 간단하게 export 할 수 있음 

하지만 const let var 랑 default는 같이 사용할 수 없음

 

test.mjs 파일이 적혀있는 스크립트 태그를 삭제했지만 오류 생기지 않고 알맞은 값이 나옴

자바스크립트 파일을 모듈로서 사용하면 여러 모듈의 중심이 되는 파일인 index.mjs 파일만 이렇게 스크립트 태그로 로드해주면 됨  

---

2-1 동물 앨범 만들기

• 각각 파일들이 가져와야 할 모듈이 서로 중복되는 경우에는 새로운 자바스크립트 파일을 생성해서 관리해야 함
• 여러 개의 모듈들을 관리하는 새로운 자바스크립트 파일의 이름은 보통 App.js로 설정함
• App.js 파일에서는 필요한 기능들을 불러와서 조합하거나 다른 모듈로부터 정보를 전달받아 처리함

App.js
웹 애플리케이션의 시작점
주요 기능들 작성
여러 모듈들 조합 및 연결 
가독성 증가

 

i

1 - index.html과 index.js 파일을 제외한 모든 파일 삭제

2 - src 폴더의 내부에 components 폴더를 생성함 

3 - components 폴더 내부에 TabBar.js 와 Content.js 와 api.js 생성해 줌

4 - index.js 파일에 있는 코드를 복사해서 api.js로 옮겨 줌

5 - api.js는 api를 호출하고 결과 값을 반환하는 역할만 해야 함 

6 - src 폴더의 내부에 이 모듈을 관리하는 자바스크립트 파일인 App.js 파일을 생성해 줌

7 - index.html 수정함 

8 - index.html 에서 클래스 이름인 TABBAR와 CONTENT 인 div 요소는 모듈로 나눠지는 파일이기 때문에 삭제해 주고

     주석으로 표시하고  스크립트 타입을 module로 작성함

9 - index.js를 수정함

10 - index.js 파일에서는 여러 모듈들을 관리하는 역할의 app.js 파일을 import 해줌

11 - index.js 파일에 웹페이지들의 핵심이 작성되어 있는 app.js 모듈을 가져와서 웹페이지에 나타내 주는 코드를 작성해야 함

12 -  4개의 버튼과 사진들이 표시되어야 하는 부분은 index.html 파일에서 id 가 app인 div 요소의 내부에 존재해야 하므로

13 -  우선 html 문서에 id 가 app인 요소를 찾아 app 엘리먼트라는 변수에 할당함

14  - 그다음 생성자 함수를 사용해 app컴포넌트를 불러와야 함

15 -  new 키워드를 사용해서 컴포넌트의 새로운 인스턴스를 생성하고 AppElement 변수에 담은 id가 app인 요소를

        생성자 함수에 전달해서 AppComponent의 인스턴스가 AppElement 요소를 화면에 표시할 수 있도록 AppElement

       요소를 조작할 수 있도록 해줌

16 - TabBar.js로 넘어가서 코드작성함

17 - TabBar.js 에서는 tabBar 컴포넌트를 나타내는 tabBar라는 함수 하나를 모듈로서 내보내주어야 하기 때문에

       식별자가 단 하나만 존재할 때 사용할 수 있는 export default를 사용해서 내보내줌 ( content.js 도 마찬가지 )

 

18 - 모든 모듈들을 관리하는 app.js 파일에 코드를 작성해야 함 

19 - App.js 파일에서는 tabBar 모듈과 content 모듈을 가져와서 관리해야 하기 때문에 두 개의 모듈들을 import 해야 함

20 - index.js 파일에서 생성한 앱 컴포넌트의 인스턴스에 인수로 앱 엘리먼트 요소를 전달해 주었기 때문에 export default라는 키워드가 붙어있는 앱 함수 옆에 있는 소괄호 안에 전달받은 app 앨리먼트 요소를 작성함

21 - import 키워드를 통해 가져온 tabBar  컴포넌트와 conetent 컴포넌트를 앱 컴포넌트에서 사용할 수 있도록 코드를 작성해야 함

22 - tabBar라는 변수에 new 키워드를 사용해서 tabBar 컴포넌트의 인스턴스를 할당해 주고 content라는 변수에는

       new 키워드를 사용해 content 컴포넌트의 인스턴스를  할당해 줌

23 -  컴포넌트를 생성자 함수를 사용해 활용하면 동일한 구조와 기능을 가진 컴포넌트의 인스턴스를 여러 번 편리하게 재 사용할 수 있음  또한, 새로운 기능이 추가되거나 수정이 되더라도 기능을 쉽게 추가, 수정할 수 있