자바스크립트 모듈
코드를 관리하는 가장 작은 단위
모듈을 이용하면 코드 관리/재활용이 편해진다.
자바스크립트 파일을 분리하고 사용하는 기술
export: 내보내기
export 지시자를 변수나 함수 앞에 붙이면
다른 외부 모듈에서 해당 변수나 함수를 import해서 사용할 수 있다.
export default class 이름{
}import: 받아오기
import 지시자를 변수나 함수 앞에 붙이면
export된 외부모듈을 가지고 와서 사용할 수 있다.
import 이름 from "경로.js"export function log(message){
console.log(message);
};
export function error(message){
console.error(message);
};
export const conGreen= "그린 컴퓨터입니다.";
위는 같은 폴더내에 있는 log.js 파일이다.
<body>
<script type="module">
import{ log } from "./log.js";
// log.js에서 export로 지정된 함수 중 log 함수만 import;
log("")
// log 함수 실행
import{ log,error,conGreen } from "./log.js";
// log.js에서 export로 지정된 함수 중 이름이 같은 함수를 import;
</script>
</body>위와 같이 import로 불러 export했던 함수/변수를 사용할 수 있다.
컴포넌트
<div id="app"></div>
<script>
const $app=document.querySelector("#app");
// 초기 상태
let state = {
students: ["stu1","stu2","stu3","stu4"]
}
console.log(state.students);
// 화면에 그리기
const render = () =>{
const {students} = state;
$app.innerHTML= `
<ul>
${students.map(stu=>`<li>${stu}</li>`).join("")}
</ul>
<button id="add">추가</button>
`;
//버튼 클릭시 newState안에 stu$를 추가하는 함수
document.querySelector("#add").addEventListener("click",function(){
setState({ students: [...students, `stu${students.length+1}`]})
//setState의 (매개변수)가 위와 같이 작성되었다.
})
};
render();
// 상태변경
const setState=(newState)=>{
state={...state, ...newState}
// ...state는 원본 배열, ...newState는 새로 만들어진 배열이다.
// ...state는 ...newState에 덮였으므로 ...newState의 값이 출력된다.
// {객체}내의 key(students)가 똑같기 때문에 구별하여 덮일 수 있다.
// 덮힌다는 것은, 뒤에 작성한 나머지 매개변수로 값이 변경된다는 것이다.
// 💡 원본을 유지해야할 필요가 있을 수 있으므로 위와 같이 작성한다.
render();
}
</script>
sumin0gig