질문드립니다.

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

8.5) Read - 투두리스트 렌더링하기

해결된 질문

작성

198

<div className="todos_wrapper">
        {todos.map((todo) => {
          return <TodoItem {...todo} />;
        })}
      </div>

여기서 <TodoItem {...todo} />

<TodoItem todo= {...todo} />

두개 차이가 뭘까요 >?

import React from "react";
import "../TodoItem.css";
const TodoItem = ({ id, isDone, content, date }) => {
  return (
    <div className="TodoItem">
      <input checked={isDone} type="checkbox" />
      <div>{id}</div>
      <div>{content}</div>
      <div>{isDone}</div>
      <div>{date}</div>
    </div>
  );
};

 ({ id, isDone, content, date })

여기 {}에 넣는거랑 {}을 뺴고 넣는거랑 차이가 뭔지 모르겠어요..

javascript react node.js

답변 2

blossom_mind

질문자

아 감사합니다 .이제 이해좀 됐습니다. 확인을 못했어요 ..ㅠ

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

혹시 이전 질문의 답변을 확인하셨을까요?

이전에 올려주신 질문과 동일한 질문이여서 해당 답변을 참고해보시면 될 것 같습니다.

아래 이전 질문의 답변 첨부드립니다.

우선 Props는 컴포넌트에게 매개변수로 "객체" 형태로 전달됩니다.

따라서 다음과 같이 Parent 컴포넌트에서 Child 컴포넌트에게 Props를 제공했다면

function Parent() {
  return <Child a={1} b={2} />;
}

function Child() {
  return <div></div>;
}

Child에게는 매개변수로 다음과 같은 객체 형태의 Props가 전달될겁니다.

{
    a: 1,
    b: 2
}

그러므로 Child 컴포넌트에서는 다음과 같이 구조분해 할당을 이용해 객체 형태의 Props로 부터 특정 값을 꺼내어 활용할 수 있습니다.

function Child(props) {
  const { a, b } = props;
  return <div></div>;
}

이때 참고로 구조분해할당은 다음과 같이 매개변수의 선언과 동시에 가능합니다. (이는 자바스크립트 섹션의 내용입니다)

function Child({ a, b }) {
  return <div></div>;
}

따라서 React에서는 보통 위와같은 방식으로 간결하게 매개변수로 전달받는 Props의 값들을
즉시 구조분해 할당하여 사용합니다.

인프런 커뮤니티 질문&답변

질문드립니다.