11. 배열 렌더링하기 · GitBook

[utterances-bot]

11. 배열 렌더링하기 · GitBook

https://react.vlpt.us/basic/11-render-array.html

[dulcis-hortus]

와... 왜 key값이 필요한지 막연하게만 알고 있었는데 이렇게 명쾌하게 설명해주셔서 감사합니다! 처음부터 차근차근 매 챕터 공부하고 있어요. 문서로 만들어주셔서 정말 감사합니다!!

[Djunnni]

저도 key값이 정확히 어떤 의미를 하는지 알지 못했었는데 많이 도움이 되었습니다. 감사합니다.

[wenodev]

Map을 이용한 렌더링

• arr.map(i => ) 의 형태로 하위 컴포넌트에게 값을 전달해준다.

  Map에서 Key가 필요한 이유

• Map에 key 값이없다면 중간의 값이 바뀌었을때 그 하위 값들이 전부 변하기 때문인다. key값을 사용한다면 key를 이용해 중간의 값을 추가하게 된다.

[yunasung1003]

여기서 ㅠㅠ user={user} user 가 2개인데 둘다 어디서 온것인가요?

[jody96]

감사합니다!!!

[hinyc]

많은 도움이 됩니다. 감사합니다!!

[sshusshu]

동적인 배열을 렌더링해야 할 때에는 자바스크립트 배열의 내장함수 map() 을 사용 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정 (고유값)

고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하기 때문

[longnh214]

@yunasung1003 user={user}에서 앞의 user는 User 컴포넌트에 들어가는 user 인자를 의미하고, 뒤의 {user}는 users 배열의 각 원소값을 의미합니다.

[josunyjostar]

와 쩔엇다 이런건 어케알앗어요

[KangWoosung]

function User({ user }) { .. } 이 구문을 이해하기가 어렵네요. 왜 function User( user ) { .. } 라고 선언하면 작동하지 않는 건가요?? function User() 가 전달받는 파라메터가 리액트 객체라서 그렇게 받아야만 하는 건가요? 그렇다면, function UserList( props ) { .. } 는 어째서 function UserList({ props }) { .. } 이렇게 사용하지 않는 건가요??

[bellosogno]

지나가는 강의 수강생입니다. 왜 {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}) { 까지가 위 코드와 동일한 코드입니다.

[Namsan]

function User( user ) 로 받게되면 아래코드처럼 한번 더 가져와야 합니다 user = user.user 하고 user.username 써야하고

function User({user}) 로 받게되면 객체의 user내용을 이미 가져온 것이라서 user.username 바로 쓸수 있네요