-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
DataItem 컴포넌트 질문 있습니다.
23.11.17 18:01 작성 23.11.17 18:06 수정 조회수 189
0
안녕하세요, 강의 잘 보고 있습니다.
DataItem 컴포넌트를 생성하고 이용하는 방법에 질문 두가지가 있습니다.
(질문 1) DataItem을 자바스크립트 객체로 생성하는 방법과 jsx 컴포넌트로 생성하는 방법의 차이가 궁금합니다. jsx 컴포넌트를 이용할 때는 key값을 줄 수 있는것은 아는데요, 그 외의 차이점은 없는 것 같습니다. jsx 대신 DataItem 객체를 생성해서 사용해도 되나요?
a. map에서 자바스크립트 객체로 생성하는 방법
<div>{diaryList.map(i => DiaryItem(i)}<div>
b. jsx의 컴포넌트로 생성하는 방법
<div>{diaryList.map(i => <DiaryItem {...i}/>}<div>
(질문 2) DataItem에 props를 넘겨주는 방법에 대한 질문입니다. props에 {...i} 처럼 전개연산자를 이용하여 한번에 여러 값을 전달해주고 있는데요, 그냥 i를 전달해주어도 되지 않나요? 전개연산자를 이용하여 넘겨주는 이유가 리액트 문법 때문인지, 새 객체로 복사해서 넘겨주고 싶기 때문인건지, 혹은 다른 이유때문인지 질문 드립니다.
<div>{diaryList.map(i => <DiaryItem {...i} />}</div>
답변을 작성해보세요.
0
0
이정환 Winterlood
지식공유자2023.11.21
안녕하세요 이정환입니다.
순서대로 답변드릴게요 😃
첫번째 질문
첫번째 방식으로 진행하시면 key 값을 전달할 수 없게 됩니다 ㅠㅠ 이 key 값은 리액트가 렌더링된 리스트로부터 특정 아이템을 찾는데 활용되는데요 강의중에서는 이 파트 뒤에서 다룹니다.
두번째 질문
그냥 i를 전달해주셔도 됩니다. 다만 그렇게 전달해주시면 Child 컴포넌트에서는 Props의 값을 사용할 때 props.i.이름 이런식으로 활용해야 하기 때문에 가독성 측면에서도 생산성 측면에서도 별로 좋지 못합니다.
0
인프런 AI 인턴
2023.11.19
안녕하세요 김선정 님, 인프런 AI 인턴이에요.
(질문 1) DataItem을 자바스크립트 객체로 생성하는 방법과 JSX 컴포넌트로 생성하는 방법의 차이점에 대해 설명드리겠습니다. 자바스크립트 객체로 생성하는 방법은 일반적인 자바스크립트 객체로 생성하고, JSX 컴포넌트로 생성하는 방법은 리액트의 컴포넌트로 생성하는 것입니다. JSX 컴포넌트를 사용하면 리액트의 가독성과 재사용성을 더욱 강조할 수 있습니다. JSX 컴포넌트로 생성할 때 key 값을 줄 수 있는 이유는 리액트에서는 컴포넌트를 구별하기 위해 고유한 key를 부여하는 것을 권장하기 때문입니다. 그 외에도 JSX 컴포넌트로 생성하면 리액트의 라이프사이클 메소드, 상태 관리, 이벤트 처리 등의 특징과 장점을 활용할 수 있습니다.
(질문 2) DataItem에 props를 넘겨주는 방법에 대해서 설명드리겠습니다. {...i}와 같이 전개 연산자를 이용하여 props를 한 번에 전달하는 것은 리액트의 문법 중 하나입니다. 이 방식을 사용하면 i 객체의 모든 속성을 해당 컴포넌트의 props로 전달할 수 있습니다. i를 그대로 전달해주는 것도 가능하지만, 전개 연산자를 이용하여 속성들을 복사해서 넘겨주는 이유는 코드를 더 간결하게 작성할 수 있기 때문입니다. 또한, 전개 연산자를 사용하면 필요한 속성만 선택적으로 전달하거나, 속성의 이름을 변경하여 전달할 수도 있습니다. 이는 코드의 가독성과 유지보수성을 높일 수 있습니다.
다른 궁금한 점이 있으면 언제든지 물어보세요! 감사합니다.
답변 3