Props로 값 전달을 위한 스프레드 연산자 사용

(todo는 아래와 같이 객체요소 2개를 가지고있는 배열임)

 

컴포넌트에 props 전달에 원래 아래와 같이 이름=“값” 방식으로 해야하는데(여기에서 onCreate와 todo는 값을 담고 있는 변수임)

 

학습하다보니 아래와 같이 배열의 map메소드를 활용해서 배열 내의 객체요소(it)를 스프레드 연산자를 활용해서 컴포넌트에 값을 전달하려고 하는데

이와같이 중괄호안에 스프레드 연산자(…)를 활요해서 값을 전달할 수 있다고 한다.

그대로 풀어보면 {…it} == {id:3, content, isDone:false}  이와 같은 형식이라는 건데

 

 

TodoItem컴포넌트에서 받아올 때는 구조분해할당으로 이렇게 받아올 수 있다.

 

 

정리

• 컴포넌트로 전달하려는 이름=“값”은 props라는 객체에 담긴다.
• props는 원래 수동으로 전달하려는 모든 속성을 저장한다.

예를 들면

<TodoEditor 이름=“값”> 이렇게 값을 전달하려고 하면

props는 { 이름 : “값” } 이와 같은 객체형태로 전달된다.

 

• 스프레드연산자를 활용하면 객체의 값을 props에 그대로 붙여넣을 수 있다고한다.

---

의문점 

처음부터 지정할 때 <TodoItem {id:3, content, isDone:false}>와 같이 넘겨주는 것은 error메시지가 나오는데 왜 안되는지 아직 모르겠다. 나중에 시간이 지나서 알아낸다면 수정할 예정!