구조 분해 문법(Destructuring)질문

console.log(props)를 찍은 결과

{img: 주소} 가 나오는 것을 확인했고 선생님의 말씀을 이해했습니다. 그리고 제 나름대로 좀 더 알아보았습니다.

두번째 인자를 이처럼 넘길 수 없을까 싶은 생각에 다음과 같이 진행해보았습니다.

기존에는 인자 하나만 있어 {img}가 가능했지만 alt를 추가해보았습니다.

이때 console.log(props)를 했을 때 {img: 주소, alt: "이건 고양이입니다"}가 나왔습니다.

그리고 나서 const MainCard에 {img} 대신 {alt}를 넣고 다시 실행해보았습니다.

그 결과 잘 나오는 것을 확인할 수 있었습니다. 혹시나 싶어 이번에는 props에 width 값 400도 추가하여 해보았습니다. 그러면 이제 props에는 img, alt, width의 값을 갖고 있게 됩니다.

이 상태에서 MainCard의 변수로 {width}를 준 결과 잘 실행되는 것을 확인했습니다.

이를 통해서 리액트 컴포넌트에서 디스트럭처링 문법을 사용할 수 있으며 var를 선언하는 곳이 const MainCard = ( ) => {} 에서 괄호임을 알 수 있었습니다.

여기서 한 발 더 생각해보았습니다. img 하나만 쓰려는 것이 아니라 alt, width도 같이 쓰고 싶다면 괄호 안에서 다른 것들도 같이 선언하면 어떨까? 하고 말이죠

props가 {img : 주소 , alt: "고양이",  width: 400}를 가지고 있을 때 MainCard를 이렇게 작성해보았습니다.

그 결과 다음과 같습니다.

문제없이 잘 나오는 것을 확인할 수 있었습니다.

그럼 정리해보겠습니다.

1. 구조 분해 문법(Destructuring)에서 var선언은 리액트 컴포넌트에서 ( ) 가 담당한다.

2. props의 여러 key값을 쓰고 싶으면 ( ) 안에 여러개를 선언하면 된다.

선생님 덕분에 이것저것 해보면서 많이 배웠습니다, 감사합니다.
혹시 저와 같이 궁금한 분이 있을까 이렇게 정리해서 글을 남겨두겠습니다. 

여러 실험 해보신거 멋져요~ㅎㅎ

다 맞는데 정리를 살짝 수정할게요

1. 리액트 컴포넌트는 함수로 만들 수 있다.

function ComponentA(props) {
  return <div>hi</div>

}

const ComponentB = (props) => {
  return <div>hi</div>

}

2. JSX 문법을 사용해서 여러 인자를 넘기면 이들은 리액트 컴포넌트 함수의 첫 번째 인자로 내려온다

<ComponentA a={1} b="hi" />

function ComponentA(props) {
  console.log(props) // {a: 1, b: "hi"}

}

3. 이 첫번째 인자는 ES6의 구조분해문법을 사용해서 바로 꺼내올 수 있다.

function ComponentA({a, b}) {
  console.log(a, b) // a, hi

}

사정이 있어서 답변이 늦었습니다. 선생님의 깔끔한 정리 덕분에 저도 이 문제에 대해서 잘 이해한 것 같습니다! 특히 두 번째 부분이 제게 많은 도움이 되었습니다. 감사합니다!