코드 의미를 모르겠어요 react

Question

const {comments} = props; 의미? {} 안에는 어떤 것을 넣는 것인지요? 각 항을 설명해 주세요 { comments.map ((comments, index)=>{ return ; 리액트 진짜 어렵네요 CommentList.jsx 일부 입니다 function CommentList(props){ const {comments} = props; return( { comments.map ((comments, index)=>{ return ; })} ); }

Inje Lee (소플) · Answer

안녕하세요, 소플입니다. 첫 번째 질문에서 여쭤보신 문법은 JavaScript의 Destructuring assignment 라는 문법입니다. JavaScript에 익숙하지 않으시다면 조금 어렵게 느껴지실 수 있는데요, 쉽게 설명하면 객체 안에 있는 변수들을 꺼내서 새로운 변수에 대입하는 방법이라고 이해하시면 됩니다. 해당 문법을 사용하지 않으면, 일일이 객체 안에 있는 변수들을 다 꺼내서 각각 변수로 선언해야 하는데, 그렇게 되면 코드 양도 많아지고 지저분해지기 때문에 해당 문법을 사용하는 것입니다. 아래 예시 코드와 링크를 참고하시면 이해하시는데 도움이 될 것 같습니다. // 변수를 각각의 변수로 선언하는 기존 방식 const name = props.name; const tall = props.tall; const location = props.location; const address = props.address; // Destructuring assignment를 사용한 방식 const { name, tall, location, address } = props; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment   두 번째 질문에서 여쭤보신 코드는 JavaScript array의 map() 함수를 사용해서, 배열 안에 있는 각 정보를 이용해 CommentListitem 라는 컴포넌트를 렌더링하는 코드입니다. 섹션 10에 나오는 여러 개의 Component 렌더링 하기 강의를 다시 한 번 보시면 도움이 되실 것 같습니다.   JavaScript에 익숙하지 않은 상태로 리액트를 공부하려고 하면 생각보다 더 어렵게 느껴지실 수 있습니다. 하지만 너무 어렵게만 생각하지 마시고 익숙하지 않은 문법이 나오면 그때 그때 찾아가면서 확실하게 이해하시면 좋을 것 같고, 그렇게 문법을 이해한 이후에 다시 리액트 코드를 보면 또 쉬워 보이면서도 새롭게 다가오는 부분들이 분명 있을 겁니다. 앞으로도 포기하지 마시고 꾸준히 학습하셔서 꼭 개발실력을 향상 시키실 수 있기를 바랍니다! 감사합니다.