[React Exam 30] map() 사용 시 올바른 key 사용법

키는 주변 배열의 context에서만 의미가 있습니다.
예를 들어 ListItem 컴포넌트를 추출 한 경우 ListItem 안에 있는 <li> 엘리먼트가 아니라 배열의 <ListItem /> 엘리먼트가 key를 가져야 합니다.

let users = [     { id: 11, username: "한사람", age: 18, gender: true },     { id: 12, username: "두사람", age: 22, gender: true },     { id: 13, username: "세사람", age: 28, gender: false },     { id: 14, username: "네사람", age: 16, gender: true },     { id: 15, username: "오사람", age: 44, gender: false },     { id: 16, username: "육사람", age: 25, gender: false } ]; let style = { width: "120px", border: "1px solid gray", margin: "5px", textAlign: "center", float: "left", padding: "10px" }

 

다음은 잘못된 key의 사용예입니다.

const ViewUser = ({ user }) => {     let { id, username, age, gender } = user     // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.     return (         <div key={id} style={style}>             <h3>{username}님</h3>             <div>{age}세({age >= 20 ? "어른" : "얼라"}, {gender ? "남자" : "여자"})</div>         </div>     ); } export const LoopRandering1 = () => {     return (         <div>             {/* 여기에 key를 지정해야 합니다. */}             {                 users.map((user) => <ViewUser user={user} key={user.id} />)             }             <br style={{ clear: "both" }} />         </div>     ); } export const LoopRandering2 = () => {     // 여기에 key를 지정해야 합니다.     const listItems = users.map((user) => <ViewUser user={user} key={user.id} style={style}/>);     return (         <div>             {listItems}             <br style={{ clear: "both" }} />         </div>     ); }

 

Key는 형제 사이에서만 고유한 값이어야 한다.
Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없습니다. 
두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.

export const LoopRandering3 = () => {     // 여기에 key를 지정해야 합니다.     // 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.     const nameItems = users.map((user) => <div user={user} key={user.id} style={style}>{user.username}</div>);     const genderItems = users.map((user) => <div user={user} key={user.id} style={style}>                                                 {user.gender ? "남자" : "여자"}({user.age}세 {user.age >= 20 ? "어른" : "얼라"})                                             </div>);     return (         <div>             {nameItems}             <br style={{ clear: "both" }} />             {genderItems}             <br style={{ clear: "both" }} />         </div>     ); }

 

LoopRendering2.js 파일을 파일을 만듭니다.

let users = [
    { id: 11, username: "한사람", age: 18, gender: true },
    { id: 12, username: "두사람", age: 22, gender: true },
    { id: 13, username: "세사람", age: 28, gender: false },
    { id: 14, username: "네사람", age: 16, gender: true },
    { id: 15, username: "오사람", age: 44, gender: false },
    { id: 16, username: "육사람", age: 25, gender: false }
];
 
let style = { width: "120px", border: "1px solid gray", margin: "5px", textAlign: "center", float: "left", padding: "10px" }
 
const ViewUser = ({ user }) => {
    let { id, username, age, gender } = user
    // 틀렸습니다! 여기에는 key를 지정할 필요가 없습니다.
    return (
        <div key={id} style={style}>
            <h3>{username}님</h3>
            <div>{age}세({age >= 20 ? "어른" : "얼라"}, {gender ? "남자" : "여자"})</div>
        </div>
    );
}
 
export const LoopRandering1 = () => {
    return (
        <div>
            {/* 여기에 key를 지정해야 합니다. */}
            {
                users.map((user) => <ViewUser user={user} key={user.id} />)
            }
            <br style={{ clear: "both" }} />
        </div>
    );
}
 
export const LoopRandering2 = () => {
    // 여기에 key를 지정해야 합니다. 
    const listItems = users.map((user) => <ViewUser user={user} key={user.id} style={style}/>);
    return (
        <div>
            {listItems}
            <br style={{ clear: "both" }} />
        </div>
    );
}
 
export const LoopRandering3 = () => {
    // 여기에 key를 지정해야 합니다. 
    // 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.
    const nameItems = users.map((user) =>  <div user={user} key={user.id} style={style}>{user.username}</div>);
    const genderItems = users.map((user) =>  <div user={user} key={user.id} style={style}>
               user.gender ? "남자" : "여자"}({user.age}세 {user.age >= 20 ? "어른" : "얼라"})
                </div>);
    return (
        <div>
            {nameItems}
            <br style={{ clear: "both" }} />
            {genderItems}
            <br style={{ clear: "both" }} />
        </div>
    );
}
 

 

App.js 파일을 파일을 만듭니다.

import * as Loop from "./LoopRendering2";
 
const App = ()=>{
    return (
        <>
          <Loop.LoopRandering1/>
          <Loop.LoopRandering2/>
          <Loop.LoopRandering3/>
        </>
    )
}
export default App;

 

 

 

index.js 파일을 파일을 만듭니다.

1 2 3 4 5 6 7 8 9 10

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App';   const root = ReactDOM.createRoot(document.querySelector("#app")); root.render(     <React.StrictMode>         <App/>     </React.StrictMode> );

 

결과 화면입니다.