children prop & react 배열 순회(key)

📌 children 이란?

• children은 props의 일종으로, 컴포넌트 사이에 위치한 모든 JSX 요소를 포함한다.
• 여러 개의 요소를 받을 수 있다.
• 컴포넌트에 유연성을 제공하며, 내부에 다른 요소나 텍스트를 포함할 수 있게 해준다.
•  ⇒  children으로 모든 값을 받아서 표시할 수 있음. 일일이 props에 정의해서 사용하지 않아도 됨!

// App.tsx

import "./App.css";
import UserList from "./components/UserList/UserList";
import UserProfile from "./components/UserProfile/UserProfile";
import { CommunityUser } from "./models/Communityuser.model";
import { User } from "./models/User.model";

const userList = [
  new User("김상헌", 24, true),
  new User("토니 스타크", 45),
  new User("최병호", 18),
  new User("윤현영", 28),
];

const communityUserList = [
  new CommunityUser("김상헌", 24, true),
  new CommunityUser("토니 스타크", 45),
  new CommunityUser("최병호", 18),
  new CommunityUser("윤현영", 28),
];

function App() {
  return (
    <div>
      <UserList
        list={userList}
        renderItem={(user) => {
          return <li style={{ color: "green" }}>{user.name}</li>;
        }}
      />
      {/* <Button>버튼1</Button> */}
      {communityUserList.map((user) => {
        return (
          <UserProfile
            key={user.id}
            name={user.profile.firstName}
            age={user.profile.age}
            isAdmin={user.isAdmin}
          >
            커뮤니티 유저
          </UserProfile>
        );
      })}
      {userList.map((user) => {
        return (
          <UserProfile
            // key={useId()}
            key={user.id}
            name={user.name}
            age={user.age}
            isAdmin={user.isAdmin}
          >
            <h2 style={{ color: "pink" }}>일반 유저</h2>
          </UserProfile>
        );
      })}
    </div>
  );
}

export default App;

 

 ⇒ UserProfile 컴포넌트 사이에 있는 내용이 ( 커뮤니티 유저, <h2 style={{ color: "pink" }}>일반 유저</h2> ) children

 

 

 

 

 

children props 설명 참고  https://yooneeee.tistory.com/49

[수업자료] react 전반적인 설명 & 컴포넌트 설명 https://team-weing.notion.site/React-e76d66a0d4174350ad6270719749fa18

 

---

📌 배열 순회에서 key의 중요성

• 고유 식별자 역할. 리스트의 요소를 올바르게 재배치하고, 상태를 유지할 수 있다. 
  (⭐같은 유형의 요소가 있을 때는 key가 특히 중요함! 구분을 위해서,,!)
• 리렌더링 되었을 때, key를 통해 어떤 요소가 변경 되었는지 빠르게 확인 할 수 있다.

 

  //수업자료 App.tsx
  
   {communityUserList.map((user) => {
        return (
          <UserProfile
            key={user.id}
            name={user.profile.firstName}
            age={user.profile.age}
            isAdmin={user.isAdmin}
          >
            커뮤니티 유저
          </UserProfile>
        );
      })}
      {userList.map((user) => {
        return (
          <UserProfile
            // key={useId()}
            key={user.id}
            name={user.name}
            age={user.age}
            isAdmin={user.isAdmin}
          >
            <h2 style={{ color: "pink" }}>일반 유저</h2>
          </UserProfile>
        );
      })}

 

⇒ forEach는 값(새로운 배열)을 반환하지 않기 때문에 여기서 map으로 배열을 순회한다. key로 배열의 고유한 값인 id 속성을 사용했다.

(map은 값을 반환하는 것 +  forEach / return을 사용하는 것 보다 더 짧고 간편하게 배열 순회가 가능!)

 

key로 index를 사용해도 될까?

아이템 요소에 변화가 없다면 index를 key로 사용 가능.

But 중간에 item이 추가되거나 하는 변경이 있는 경우에는 key값이 바뀔 수 있다.

∴ 정상적인 인덱싱이 불가능 할 수 있어 권장하지 않는다.

 

아예 key 없이 렌더링 하면 어떻게 될까?

key로 index를 사용할 때 처럼 요소를 올바르게 추척하고 업데이트하는 데 어려움을 겪을 수 있다. 왜냐면,,

 

1. 리액트는 state(상태)가 변경되면 가상 DOM을 업데이트 하고, 이를 실제 DOM과 비교해 변경사항만 업데이트 하기 때문!

 ⇒ 이 과정에서 변경 된 요소를 고유하게 식별할 수 있어야 함 (당연함,, 고유 식별자인 key가 없으면 뭐가 변했는지 알기 힘듦,,)

 

2. key를 통해 어떤 요소가 추가, 삭제 되었는지 알 수 있는데 key가 없으면 변경사항을 업데이트 할 수 없으니 잘못된 상태를 매핑하는 경우가 생긴다. 

 ⇒ 사용자 환경에 혼동을 줄 수 있음..!!