react-tutorial
react-tutorial copied to clipboard
velopert
11. 배열 렌더링하기 · GitBook
와... 왜 key값이 필요한지 막연하게만 알고 있었는데 이렇게 명쾌하게 설명해주셔서 감사합니다! 처음부터 차근차근 매 챕터 공부하고 있어요. 문서로 만들어주셔서 정말 감사합니다!!
Map을 이용한 렌더링
- arr.map(i => <User user={i}>) 의 형태로 하위 컴포넌트에게 값을 전달해준다.
Map에서 Key가 필요한 이유
- Map에 key 값이없다면 중간의 값이 바뀌었을때 그 하위 값들이 전부 변하기 때문인다. key값을 사용한다면 key를 이용해 중간의 값을 추가하게 된다.
<User user={user} key={user.id} /> 여기서 ㅠㅠ user={user} user 가 2개인데 둘다 어디서 온것인가요?
동적인 배열을 렌더링해야 할 때에는 자바스크립트 배열의 내장함수 map() 을 사용 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정 (고유값)
고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문
@yunasung1003 user={user}에서 앞의 user는 User 컴포넌트에 들어가는 user 인자를 의미하고, 뒤의 {user}는 users 배열의 각 원소값을 의미합니다.
function User({ user }) { .. } 이 구문을 이해하기가 어렵네요. 왜 function User( user ) { .. } 라고 선언하면 작동하지 않는 건가요?? function User() 가 전달받는 파라메터가 리액트 객체라서 그렇게 받아야만 하는 건가요? 그렇다면, function UserList( props ) { .. } 는 어째서 function UserList({ props }) { .. } 이렇게 사용하지 않는 건가요??
지나가는 강의 수강생입니다. 왜 {user} 로 받는지에 대한 답입니다. function User(user) { console.log(user); 처럼 해 보면 {user: ...} 로 담긴 배열 내용을 확인할 수 있습니다. (property-value가 담긴 관계 배열처럼 생긴 object.. )
그러므로 아래 코드처럼 써도 됩니다만.. function User(orgUser) { const user = orgUser.user;
코드 양을 줄여 parameter 부분에 {user} 처럼 쓰면 객체에서 user key에 해당하는 "값"을 직접 뽑아낼 수 있습니다. function User({user}) { 까지가 위 코드와 동일한 코드입니다.
function User( user ) 로 받게되면 아래코드처럼 한번 더 가져와야 합니다 user = user.user 하고 user.username 써야하고
function User({user}) 로 받게되면 객체의 user내용을 이미 가져온 것이라서 user.username 바로 쓸수 있네요
