코드 의미를 모르겠어요 react

안녕하세요, 소플입니다.

첫 번째 질문에서 여쭤보신 문법은 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에 익숙하지 않은 상태로 리액트를 공부하려고 하면 생각보다 더 어렵게 느껴지실 수 있습니다. 하지만 너무 어렵게만 생각하지 마시고 익숙하지 않은 문법이 나오면 그때 그때 찾아가면서 확실하게 이해하시면 좋을 것 같고, 그렇게 문법을 이해한 이후에 다시 리액트 코드를 보면 또 쉬워 보이면서도 새롭게 다가오는 부분들이 분명 있을 겁니다.

앞으로도 포기하지 마시고 꾸준히 학습하셔서 꼭 개발실력을 향상 시키실 수 있기를 바랍니다!

감사합니다.