[Svelte강좌] 6강 Svelte Props - 오쌤의 니가스터디

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. Props

---

- [props]는 [properties]를 줄임말입니다.

- 부모 컴포넌트가 자손컴포넌트에게 전달해주는 값이라고 생각하면 편합니다.

 

 

 

1) Props 기본 사용방법

- 부모컴포넌트는 기본적으로 만들어져 있는 [ App.svelte ]로 사용하겠습니다. 

- 자손컴포넌트인 [ Child.svelte ]는 새 문서를 만들어서 사용해주세요. 

 

## 코드 보기 - Child.svelte

<script>
    //여기는 자손컴포넌트

    export let user;
    export let age;
    export let hobby;
</script>

<h3>이름 : { user }</h3>
<h3>나이 : { age }</h3>
<h3>취미 : { hobby }</h3>
<hr>

- 자손 컴포넌트에서 사용한 상태값은  export 를 통해서 부모컴포넌트로 상태값을 내보내줍니다.

 

 

 

## 코드 보기 - App.svelte

<script>
	//여기는 부모컴포넌트
	import Child from "./Child.svelte";
</script>

<Child user={'김철수'} age={20} hobby={'축구하기'} />
<Child user={'이영희'} age={21} hobby={'넷플릭스보기'} />

- 부모 컴포넌트인 [ App.svelte ]로 자손 컴포넌트를  import 를 통해 불러 옵니다.

-  <Child /> 컴포넌트에 속성처럼 작성해서 자손컴포넌트에 값을 전달해줍니다.

Props이름 = { 전달값 }

Props이름="전달값" //이렇게 리액트처럼 써도 잘 나옵니다.

 

 

 

## 결과 보기

- 그럼 두명이 같은 태그 스타일로 잘 나오는 것이 확인됩니다. 

 

 

 

 

 

 

 

 

 

 

 

2) 기본값(Default) 설정

- 부모 컴포넌트에서 값을 내려주지 않으면 [undefined]가 처리됩니다.

- 그래서 기본값을 설정해주면 깜박해서 값을 내려주지 않더라도 기본값으로 설정됩니다.

- 기본값 설정은 자손 컴포넌트에서  export 되는 변수값에 작성하면 됩니다. 

 

 

## 코드 보기 - Child.svelte

<script>
    //여기는 자손컴포넌트

    export let user = "홍길동";
    export let age = 20;
    export let hobby = "독서";
</script>

<h3>이름 : { user }</h3>
<h3>나이 : { age }</h3>
<h3>취미 : { hobby }</h3>
<hr>

- 변수값에 모두 기본값을 지정했습니다.

 

 

## 코드 보기 - App.svelte

<script>
	//여기는 부모컴포넌트
	import Child from "./Child.svelte";
</script>

<Child user={'김철수'} age={20} hobby={'축구하기'} />
<Child user={'이영희'} age={21} hobby={'넷플릭스보기'} />
<Child />

- 마지막 컴포넌트에는 Props로 값을 내려주지 않고 컴포넌트명만 작성했습니다. 

 

 

## 결과 보기

- 마지막 3번째에 값들이 기본값으로 잘 들어가 있는 것이 확인됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90

반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. Props 데이터 변경

---

- Props는 부모컴포넌트가 값을 자손 컴포넌트에 내려줍니다.

- 즉, 자손 컴포넌트는 전달되는 값을 변경할 수 없고, 오직 부모 컴포넌트에서만 변경이 가능하다는 것을 의미합니다.

- 그래서 값을 변경할 때는 부모컴포넌트에서 변경한 후 다시 자식 컴포넌트로 넘기면 됩니다. 

 

 

 

1) 데이터 변경하기

- 위의 데이터에서 기존 사람들의 나이를 1씩 감소, 증가해보겠습니다.

 

 

## Child.svelte

<script>
    //여기는 자손컴포넌트

    export let user = "홍길동";
    export let age = 20;
    export let hobby = "독서";
</script>

<h3>이름 : { user }</h3>
<h3>나이 : { age }</h3>
<h3>취미 : { hobby }</h3>
<hr>

- 자식 컴포넌트는 사람에 대한 데이터 설명을 해두었습니다.

 

 

 

## App.svelte

<script>
	//여기는 부모컴포넌트
	import Child from "./Child.svelte";

	let age01 = 20;
	let age02 = 21;
	
	const agePlus = () => {
		age01++;
		age02++;
	}
	const ageMinus = () => {
		age01--;
		age02--;
	}
</script>

<Child user={'김철수'} age={ age01 } hobby={'축구하기'} />
<Child user={'이영희'} age={ age02 } hobby={'넷플릭스보기'} />

<button on:click={ageMinus}>나이감소-</button>
<button on:click={agePlus}>나이증가+</button>

- 부모 컴포넌트에서는 자손컴포넌트를 가져온 후, 각각의 나이값을 변수에 담아두고 함수를 통해 1씩 증가하거나, 감소하게 처리했습니다. 

- 위에서 설명했듯이 값은 부모컴포넌트에서 변경해야 합니다.

 

 

 

## 결과보기

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. Spread Props

---

## 스프레드 오퍼레이터(Spread Operator)

- 한글로 번역해보자면 펼침연산자 정도로 볼수 있습니다. 

- 특정, 객체나 배열의 값을 복제할 때 사용합니다.

var 새로운객체명 = {...기존객체명};
var 새로운배열명 = [...기존배열명];

- 보통 자바스크립트의 비구조화할당과 많이 사용됩니다.

- 비구조화할당이 익숙하지 않은 개발자라면 아래 주소를 보고 오시길 바랍니다.

https://ossam5.tistory.com/161?category=921603 

[ES6강좌] 5강 비구조화 할당(destructuring assignment) - 오쌤의 니가스터디

 

 

 

 

 

 

 

## 문법

const 객체명 = {
	//Child컴포넌트에서 내보낸 변수를 속성으로 값을 할당
    자손변수: 값
}

<Child컴포넌트명 { ...객체명 } />

 

 

 

## Child.svelte - 코드보기

<script>
    //여기는 자손컴포넌트

    export let user;
    export let age;
    export let hobby;
</script>

<h3>이름 : { user }</h3>
<h3>나이 : { age }</h3>
<h3>취미 : { hobby }</h3>
<hr>

- 자손컴포넌트는 위와 다르지 않습니다. 각각의 변수로 값을 부모컴포넌트로 내보내줍니다. 

 

 

## App.svelte - 코드보기

<script>
	//여기는 부모컴포넌트
	import Child from "./Child.svelte";

	const allData01 = {
		user: '김철수',
		age: 20,
		hobby: '축구하기'
	}
	const allData02 = {
		user: '김영희',
		age: 21,
		hobby: '넷플릭스보기'
	}
</script>

<Child { ...allData01 } />
<Child { ...allData02 } />

- 원래 태그의 속성으로 처리했던 Props를 객체문법을 통해 담아줍니다. 이때 객체의 속성명은 반드시 자손컴포넌트에서 내보낸 변수명이어야 합니다.

- 그리고 자손컴포넌트인  <Child /> 의 중괄호{ } 안에 스프레드오퍼레이터를 쓴 후 객체명을 써줍니다. 

 

 

 

 

## 결과 보기

- 역시 결과 도출이 잘 되는 것을 확인할 수 있습니다.