DataItem 컴포넌트 질문 있습니다.
안녕하세요, 강의 잘 보고 있습니다.
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>
답변 3
0
안녕하세요 이정환입니다.
순서대로 답변드릴게요 😃
첫번째 질문
첫번째 방식으로 진행하시면 key 값을 전달할 수 없게 됩니다 ㅠㅠ 이 key 값은 리액트가 렌더링된 리스트로부터 특정 아이템을 찾는데 활용되는데요 강의중에서는 이 파트 뒤에서 다룹니다.
두번째 질문
그냥 i를 전달해주셔도 됩니다. 다만 그렇게 전달해주시면 Child 컴포넌트에서는 Props의 값을 사용할 때 props.i.이름 이런식으로 활용해야 하기 때문에 가독성 측면에서도 생산성 측면에서도 별로 좋지 못합니다.
0
안녕하세요 김선정 님, 인프런 AI 인턴이에요.
(질문 1) DataItem을 자바스크립트 객체로 생성하는 방법과 JSX 컴포넌트로 생성하는 방법의 차이점에 대해 설명드리겠습니다. 자바스크립트 객체로 생성하는 방법은 일반적인 자바스크립트 객체로 생성하고, JSX 컴포넌트로 생성하는 방법은 리액트의 컴포넌트로 생성하는 것입니다. JSX 컴포넌트를 사용하면 리액트의 가독성과 재사용성을 더욱 강조할 수 있습니다. JSX 컴포넌트로 생성할 때 key 값을 줄 수 있는 이유는 리액트에서는 컴포넌트를 구별하기 위해 고유한 key를 부여하는 것을 권장하기 때문입니다. 그 외에도 JSX 컴포넌트로 생성하면 리액트의 라이프사이클 메소드, 상태 관리, 이벤트 처리 등의 특징과 장점을 활용할 수 있습니다.
(질문 2) DataItem에 props를 넘겨주는 방법에 대해서 설명드리겠습니다. {...i}와 같이 전개 연산자를 이용하여 props를 한 번에 전달하는 것은 리액트의 문법 중 하나입니다. 이 방식을 사용하면 i 객체의 모든 속성을 해당 컴포넌트의 props로 전달할 수 있습니다. i를 그대로 전달해주는 것도 가능하지만, 전개 연산자를 이용하여 속성들을 복사해서 넘겨주는 이유는 코드를 더 간결하게 작성할 수 있기 때문입니다. 또한, 전개 연산자를 사용하면 필요한 속성만 선택적으로 전달하거나, 속성의 이름을 변경하여 전달할 수도 있습니다. 이는 코드의 가독성과 유지보수성을 높일 수 있습니다.
다른 궁금한 점이 있으면 언제든지 물어보세요! 감사합니다.
useEffect와 lifecycle문의
0
27
2
프론트엔드 학습 수준 문의
0
39
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
48
2
데이터 로딩중 화면만 계속 나와요!!
0
55
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
79
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
84
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
85
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
108
2
onMouseEnter 관련 문의 드립니다
0
92
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
113
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
136
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
69
1
vs code 자동완성관련 문의
0
113
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
179
2
87강 필터 함수 질문
0
69
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
90
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
75
2