인프런 커뮤니티 질문&답변
작성한 질문수
투두리스트 렌더링 강의 부분에서 질문있습니다.
작성
·
55
0
현재 투두리스트 렌더링하기 강의에서 List 컴포넌트 부분에서
todos.map을 돌리고 TodoItem 컴포넌트에 {...todo}로 mockData에 있는 객체를 구조분해할당으로 풀어서 키를 props로 전달하는데 전달할때 보통 todo={...todo} 이렇게 보내지 않고 그냥 {...todo} 이렇게 앞에 todo= 이런식으로 작성하지 않은 이유가 뭔지 궁금합니다.
답변 2
0
안녕하세요 이정환입니다.
todo={...todo} 대신 {...todo} 형태로 전달하는 이유는 구조분해할당을 통해 개별 속성들을 별도로 전달하기 위함입니다.
todo={...todo} 형태로 전달했다면 자식 컴포넌트에서도 props.todo.a, props.todo.b 요런식으로 props의 todo 객체 안의 값을 점 표기법으로 접근해 꺼내와야 하겠지만 {...todo} 형태로 전달하면 props.a, props.b 등의 형태로 접근 가능합니다.
자세한 사항은 우리 강의의 Props 혹은 아래 제가 직접 작성한 게시글 링크를 참고하시면 좋겠습니다
https://reactjs.winterlood.com/c89cba30-39b6-4094-85f6-f87a16842028#7755ff9eba604d359c22571b0d59715c
0
안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님.
리액트에서는 컴포넌트에 props를 전달할 때, 구조분해 할당을 통해 개별 속성들을 별도로 전달할 수 있습니다. 질문에서 언급하신 부분에 대해 설명드리면, jsx {...todo} 를 사용하면 todo 객체의 모든 속성들이 개별적인 props로 컴포넌트에 전달됩니다. 즉, { id, name, isDone } 같은 형태로 각각의 속성이 별도로 props로 전달되는 것입니다.
반면에 jsx todo={...todo} 는 todo 객체 전체를 단일 todo prop으로 전달하는 형식입니다. 이 경우, 컴포넌트 내부에서 다시 개별 속성을 사용하려면 props.todo.id 와 같은 형식으로 접근해야 합니다.
이 방식 선택은 주로 코드의 명확성과 개발자의 스타일 차이로 볼 수 있습니다. 다른 이유로는:
- ** {…todo} 방식:** 개별적인 속성들로 분리하여 사용하고자 할 때 유용합니다. 주로 간결하고 명시적인 props 사용을 선호할 때 사용됩니다.
- todo={…todo} 방식: 객체 자체를 하나의 prop으로 보낼 필요가 있을 때 사용됩니다. 이는 주로 구조가 복잡하거나 전체 객체로 관리해야 하는 경우에 적합합니다.
추가적으로, {…todo} 의 경우 구조분해 할당 덕분에 일부 속성만을 선택적으로 전달하기도 쉽습니다.
추천해드릴 유사 질문으로는,
- “질문드립니다.”에서 {...props}를 사용하여 여러 속성을 한꺼번에 전달하는 방식과 해당 속성을 직접 명시적으로 전달하는 방식의 차이를 설명한 답변이 도움이 될 수 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.