인프런 커뮤니티 질문&답변
작성한 질문수
코드 의미를 모르겠어요 react
작성
·
1.1K
1
const {comments} = props;
의미? {} 안에는 어떤 것을 넣는 것인지요?
각 항을 설명해 주세요
{comments.map((comments, index)=>{
return <CommentListitem key={comment.id} comment={comment} />;
리액트 진짜 어렵네요
CommentList.jsx 일부 입니다
function CommentList(props){
const {comments} = props;
return(
<Wrapper>
{comments.map((comments, index)=>{
return <CommentListitem key={comment.id} comment={comment} />;
})}
</Wrapper>
);
}
답변 1
1
안녕하세요, 소플입니다.
첫 번째 질문에서 여쭤보신 문법은 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에 익숙하지 않은 상태로 리액트를 공부하려고 하면 생각보다 더 어렵게 느껴지실 수 있습니다. 하지만 너무 어렵게만 생각하지 마시고 익숙하지 않은 문법이 나오면 그때 그때 찾아가면서 확실하게 이해하시면 좋을 것 같고, 그렇게 문법을 이해한 이후에 다시 리액트 코드를 보면 또 쉬워 보이면서도 새롭게 다가오는 부분들이 분명 있을 겁니다.
앞으로도 포기하지 마시고 꾸준히 학습하셔서 꼭 개발실력을 향상 시키실 수 있기를 바랍니다!
감사합니다.