===
Install
C:\MoonDev\withTool\inSvelte\svelteLearning> bootapp -u mooninlearn -n learn-svelte-web-freeseamew -d "만들면서 배우는 svelte(https://freeseamew.gitbook.io/svelte/)" -t svelte-web-template-js
3. 컴포넌트 - 기본
컴포넌트 통신방법 1 : props
state 즉 상태값은 해당 state를 만든 자기자신 컴포넌트에서만 쓰이는 경우도 있지만 state를 다른 컴포넌트에서전달해서 사용하는 경우도 매우 많습니다.
- props 설명 state의 전달에서 가장 기본이 되는 방법은 부모(상위)컴포넌트에서 자식(하위) 컴포넌트로 값을 전달하는 경우입니다. 이럴 경우 사용 되는 기본 전달 방법인 바로 props입니다.
예제 1
App.svelte
<script>
import Child from './child.svelte'
</script>
<SChildComp carryValue = { 12 } >
```
태그 형태의 컴포넌트에 prop이름 = { 전달값 } 이 형태로 값을 전달할 수 있습니다.
> Child.svelte
```svelte
<script>
export let carryValue
</script>
```
<p> 전달된 값은 { carryValue } 입니다. </p>
자식컴포넌트로 전달된 값은 export let props이름 이 형태로 받아서 사용 가능합니다.
정의된 state를 전달하는 방법도 있습니다. 가장 기본적으로 많이 쓰이는 방법입니다.
```svelte
<script>
import Child from './child.svelte';
let carryValue = 12;
</script>
<Child {carryValue} />
// Child.svelte
<script>
export let carryValue
</script>
<p> 전달된 값은 { carryValue } 입니다. </p>
```
props는 또한 함수도 전달가능합니다.
> App.svelte
```svelte
<script>
import Child from './components/child.svelte'
let value = 0
function handleValueAdd(event, param) {
value = value + param
}
</script>
<p>value : {value}</p>
<Child {handleValueAdd} />
// child.svelte
<script>
import SubChild from './subChild.svelte'
export let handleValueAdd
</script>
<SubChild {handleValueAdd} />
// subChild.svelte
<script>
export let value
export let handleValueAdd
</script>
<button on:click={(event) => handleValueAdd(event,10)} >Add 10</button>
<button on:click={(event) => handleValueAdd(event,20)} >Add 20</button>
예제 - props
App.svelte
<script>
import PanelComponent from './components/panelComponent.svelte'
let count = 10
function incrementCount() {
// count = count + 1
count ++
}
</script>
<PanelComponent {count} {incrementCount} />
panelComponent.svelte
<script>
import ButtonComponent from './buttonComponent.svelte'
export let count
export let incrementCount
</script>
<div class="penal">
<h1>{count}</h1>
<ButtonComponent {incrementCount} />
</div>
<style>
.penal {
padding: 20px;
display:flex;
flex-direction: column;
justify-items: center;
justify-content: space-around;
align-items: center;
height: 500px;
width:400px;
background: #e2e2e2;
border: 1px solid #777777;
}
</style>
buttonComponent.svelte
<script>
export let count
export let incrementCount
</script>
<button on:click={incrementCount} >
increment count [{count}]
</button>
앱 구조 설명 : main.js, App.js, 폴더구조
- 기본 구조 설치 폴더 기본 구조
""" svelte │ └── public │ ├── favicon.png │ ├── global.css │ └── index.html ├── scripts ├── src │ ├── App.svelte │ └── main.js ├── package.json └── rollup.config.js """
이제 src 폴더를 보도록 하겠습니다. 이제부터 여러분이 작성할 대부분의 코드는 src 폴더 아래에 작성이 될 것입니다. 이 src 폴더에 기본적으로 생성되는 파일은 App.svelte 와 main.js가 있습니다. App.svelte는 사용하는 컴포넌트들을 담는 가장 첫번째 컴포넌트로서 모든 컴포넌트의 부모 컴포넌트라고 보시면 됩니다. 그리고 main.js는 가장 먼저 실행되는 javascript파일로 js 및 서비스의 시작점이라고 생각하시면 됩니다. 이 main.js의 가장 큰 역할 중에 하나는 이 App.js를 index.html 파일에 위치시키고 서비스를 시작하는 기능이 되겠습니다.
App.svlete
<script>
export let name;
</script>
<style>
h1 {
color: purple;
}
</style>
<h1>Hello {name}</h1>
svelte파일에는 script, css, html 을 필요에 따라 구성해 사용할 수 있습니다.
main.js
import App from './App.svelte'
const app = new App({
target: document.body,
props: {
name: 'world'
}
})
export default app
main.js 는 App을 불러와 target을 이용해 만들어진 앱을 배치시켜 실행시킵니다. 그리고 public 폴더의 global.css 에 스타일을 지정해 두면 스타일이 전역으로 설정되므로 공통으로 사용되는 css를 이곳에 설정해 두면 편리합니다.
1. svelte 소개 - 만들면서 배우는 svelte
svelte는 2016년경 만들어진 매우 젋은 프레임워크 입니다. 2019년도에 관심도가 급격히 상승했는데요, 저도 이때즘 svelte를 접하게 되었습니다.
svelte 홈페이지를 보시면 첫 페이지에 다음과 같은 3가지를 중요한 특징으로 말하고 있습니다.
- write less code (보다 적은 코드로)
이 특징들 중에서 코드를 조금만 다뤄 봐도 체감이 가능한 부분은 write less code, 그리고 Truly reactiv 즉 보다적은 코드로 reactivity 적인 결과물을 낼 수 있는 부분입니다.
다음 코드를 봐주시기 바랍니다. state를 정의하는 부분을 다른 프레임워크들과 비교한 부분인데요. 코드의 양이 확연히 차이가 나는 것을 알 수 있습니다. 보다 적은양의 코드로 결과물을 만들 수 있다는 것이고 이것은 높은 생산성이 보장됨을 말하는 부분이기도 합니다.
그리고 지금 이 코드는 리엑티비티 즉 반응성을 테스트 하는 코드 인데요.
alert('카운트가 10을 넘었습니다. ')
