Props 전달하는 경우 전개연산자(Spread Operator)의 사용

일반적으로 props를 넘겨줄 때 컴포넌트 내의 태그 내에서 <태그 ex={ex} />와 같은 형태로 넘겨주었는데 

props로 넘겨줄 객체가 존재하는 경우에는 전개 연산자를 활용해 그대로 넘겨줄 수 있다.

예를 들어 아래의 두 컴포넌트는 결과적으로 동일하다.

function fn1() {
  return <TodoList content1="독서" content2="조깅"/>;
}

function fn2() {
  const props = {content1="독서" content2="조깅"};
  return <Greeting {...props} />;}

props는 객체이기 때문에 일반적으로 태그 안에 <TodoList content1="독서" content2="조깅"/>이와 같이 지정하는 경우에는

props = { content1 : "독서", content2 : "조깅" }이 되는 것이고

 

전개연산자를 활용하는 경우

const props = {content1="독서" content2="조깅"}
 return <Greeting {...props} />;}

태그 안에 위와 같이 입력하는 것은

전개연산자를 활용해서 프로퍼티(key와 value)를 복사해서 결국 props객체 안에 복사하는 것으로 이해했다.

 

//나중에 더 이해한 내용이 생긴다면 추가 예정